/*------------------------------------
  Base
------------------------------------*/
/* The theme uses these without defining them: muted text and headings would otherwise inherit the
   body colour. They follow the theme's own muted and heading colours; app-dark.css sets the dark ones. */
:root {
    --bs-secondary-color: #8c98a4;
    --bs-heading-color: #1e2022;
    /* A card's surface outside the theme's .card, whose own variable exists only inside it:
       white here, the dark card in app-dark.css. */
    --ayc-card-bg: #fff;
}

html, body { font-family: system-ui, sans-serif; margin: 0; }
.shell > header { display: flex; gap: 1rem; align-items: center; padding: 1rem; border-bottom: 1px solid #ddd; }
.shell > main { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem; }

/*------------------------------------
  Skeleton Loader
------------------------------------*/
.skeleton-line {
    display: block;
    background-color: #e7eaf3;
    border-radius: 0.25rem;
}

.skeleton-circle {
    display: inline-block;
    width: 2.625rem;
    height: 2.625rem;
    min-width: 2.625rem;
    border-radius: 50%;
    background-color: #e7eaf3;
}

@keyframes skeleton-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

.skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/*------------------------------------
  Overlay
------------------------------------*/
.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
}

/*------------------------------------
  Blazor error UI
------------------------------------*/
#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    display: none;
    left: 0;
    padding: 1rem;
    position: fixed;
    right: 0;
    /* Above the startup indicator, otherwise a boot failure stays hidden behind the spinner */
    z-index: 1100;
}

#blazor-error-ui .reload {
    margin-left: 1rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/*------------------------------------
  Fullscreen utility
------------------------------------*/
.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    z-index: 1000;
}

.ql-editor.ql-blank::before {
    color: #adb5bd;
}

/* The session composer's hint holds on one line, however narrow the screen. */
.session-thread .ql-editor.ql-blank::before {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ql-editor:focus {
    outline: none;
    box-shadow: none;
}

.ql-toolbar,
.ql-tooltip {
    z-index: 9999 !important;
}

/* The formatting bubble wraps onto a second row rather than running out of its editor. */
.ql-bubble .ql-tooltip {
    max-width: 100%;
}

.ql-bubble .ql-tooltip .ql-toolbar {
    display: flex;
    flex-wrap: wrap;
}

/* Wrapped, the pill's round ends would cut into the second row, and its rows sit centered. */
@media (max-width: 575.98px) {
    .ql-bubble .ql-tooltip {
        border-radius: 0.75rem;
    }

    .ql-bubble .ql-tooltip .ql-toolbar {
        justify-content: center;
    }
}

/*------------------------------------
  Gradient text
------------------------------------*/
.gradient-text {
    background: linear-gradient(90deg, #6fb1fc 10%, #7a3dbb 40%, #9b4ddb 60%, #c86dd7 75%, #e0c3fc 90%);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

/* A title in the gradient: bold, over its few letters, and in deeper tones than the text gradient,
   which reads too pale on white at a title's size. The dark theme keeps the light tones. */
.gradient-text.gradient-title {
    background-image: linear-gradient(90deg, #377dff, #7a3dbb 60%, #b84fc9);
    background-size: 100%;
    font-weight: 700;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.gradient-animated-text {
    font-weight: 500;
    background: linear-gradient(270deg, #6fb1fc, #c86dd7, #e0c3fc, #6fb1fc);
    background-size: 600% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move 3s linear infinite;
}

/*------------------------------------
  Voice call — participant grid
------------------------------------*/
:root {
    --radius: 1rem;
    --participant-size: 200px;
}

.participant {
    position: relative;
    width: var(--participant-size);
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    background: linear-gradient(to bottom, #1a1a1a, #222);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
}

.participant.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(270deg, #6fb1fc, #c86dd7, #e0c3fc, #6fb1fc);
    background-size: 300% 300%;
    animation: pulseHaloGradient 4s ease-in-out infinite;
    z-index: 0;
    filter: blur(6px);
    pointer-events: none;
}

@keyframes pulseHaloGradient {
    0% {
        transform: translate(-50%, -50%) scale(0.95);
        background-position: 0% 50%;
        opacity: 0.9;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        background-position: 100% 50%;
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.95);
        background-position: 0% 50%;
        opacity: 0.9;
    }
}

#transcriptionArea {
    background-color: rgba(0, 123, 255, 0.04);
    border-radius: 1rem;
    padding: 1rem;
    overflow-y: auto;
}

/*------------------------------------
  Dialog / Action sheet z-index
------------------------------------*/
#dialogService,
#actionSheet {
    z-index: 1070;
}

/*------------------------------------
  Modal slide animations
------------------------------------*/
@keyframes modalSlideOutLeft {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(-30%); opacity: 0; }
}

@keyframes modalSlideOutRight {
    from { transform: translateX(0);   opacity: 1; }
    to   { transform: translateX(30%); opacity: 0; }
}

@keyframes modalSlideInFromRight {
    from { transform: translateX(30%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}

@keyframes modalSlideInFromLeft {
    from { transform: translateX(-30%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.modal-slide-exit-left  { animation: modalSlideOutLeft     0.15s ease-in  forwards; }
.modal-slide-exit-right { animation: modalSlideOutRight    0.15s ease-in  forwards; }
.modal-slide-enter-right { animation: modalSlideInFromRight 0.15s ease-out forwards; }
.modal-slide-enter-left  { animation: modalSlideInFromLeft  0.15s ease-out forwards; }

/*------------------------------------
  Busy indicator
------------------------------------*/
.is-busy {
    padding: 3rem 1rem;
}

/* Pinned to the viewport so the indicator stays centred whatever the host layout adds around it */
.is-busy-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: var(--bs-body-bg, #fff);
}

/*------------------------------------
  Navigation menu
------------------------------------*/

/* Below xl the menu opens over the page, and its toggle is the only way to it. The theme only
   shows the toggle on hover, which a touch screen never has: it stays in sight. */
@media (max-width: 1199.98px) {
    .navbar-nav-wrap .navbar-aside-toggler {
        opacity: 1;
    }

    /* The closed menu's own toggle sits on its edge and would peek in at the left of the page. */
    .navbar-vertical-aside-closed-mode .navbar-vertical-aside .navbar-aside-toggler {
        visibility: hidden;
    }
}

/* Below 360 px the full logo leaves the navbar's actions no room: the short one stands for it.
   The dark appearance swaps its own in app-dark.css. */
@media (max-width: 359.98px) {
    #header .navbar-brand-logo {
        display: none;
    }

    #header .navbar-brand-logo-mini {
        width: 1.9125rem;
    }

    #header .navbar-brand-logo-mini[data-hs-theme-appearance="default"] {
        display: inline;
    }
}

/* A session in the navigation menu: a circle rather than a full-size icon, centred on the
   entry's title and under the full-size glyphs of the other entries (about 1rem wide). */
.navbar-vertical .nav-link .nav-icon.session-nav-dot {
    display: inline-flex;
    align-items: center;
    align-self: center;
    font-size: 0.75rem;
    line-height: 1;
    padding-left: 0.25rem;
}

/* Each stage of a session has its colour, shared by the menu dot and the card badge. A closed or
   cancelled session turns neutral. */
.session-stage {
    --session-stage-rgb: var(--bs-secondary-rgb);
}

.session-stage--framing {
    --session-stage-rgb: 55, 125, 255;
}

.session-stage--blind-pass {
    --session-stage-rgb: 122, 90, 248;
}

.session-stage--confrontation {
    --session-stage-rgb: 234, 128, 30;
}

.session-stage--arbitration {
    --session-stage-rgb: 237, 76, 120;
}

.session-stage--shared {
    --session-stage-rgb: 0, 173, 144;
}

.session-stage--verification {
    --session-stage-rgb: 0, 132, 199;
}

.session-stage--ended {
    --session-stage-rgb: var(--bs-secondary-rgb);
}

.navbar-vertical .nav-link .nav-icon.session-nav-dot.session-stage {
    color: rgb(var(--session-stage-rgb));
}

.session-stage-badge.session-stage {
    background-color: rgba(var(--session-stage-rgb), 0.1);
    color: rgb(var(--session-stage-rgb));
}

/* A decision can be long: its menu entry keeps to the menu's width so the title ends with an
   ellipsis instead of running under the edge. The theme's items otherwise size to their content. */
.navbar-vertical .session-nav-item {
    max-width: 100%;
}

/* A session awaiting the member: the bell's dot, at the end of its menu entry. */
.navbar-vertical .session-nav-awaits {
    flex-shrink: 0;
    align-self: center;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.5rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
}

.navbar-vertical .session-nav-ended-toggle {
    color: var(--bs-secondary-color);
}

/* "Kept for the team": the box and its text share one centred line, without the offset the
   theme's floating form-check puts on the box. */
.session-keep-memory {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.session-keep-memory .form-check-input {
    float: none;
    flex-shrink: 0;
    margin: 0;
}

/* A field left empty in an invitation row that was started: it blocks sending until filled or the row cleared. */
.invitee-field--missing {
    border-color: var(--bs-warning);
}

/* The invitation panel's steps: a bar and a label each, filled up to the current step. */
.invite-steps {
    display: flex;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.invite-step {
    flex: 1;
    min-width: 0;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

.invite-step-bar {
    display: block;
    height: 4px;
    margin-bottom: 0.375rem;
    border-radius: 2px;
    background-color: var(--bs-border-color);
}

.invite-step--done .invite-step-bar,
.invite-step--current .invite-step-bar {
    background-color: var(--bs-primary);
}

.invite-step--current {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* A step the creator may go to: back to any step done, forward while the steps between are complete. */
.invite-step-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.invite-step-link:hover .invite-step-label {
    color: var(--bs-primary);
}

.invite-step-link:hover .invite-step-bar {
    background-color: rgba(var(--bs-primary-rgb), 0.6);
}

/* A settled domain reads like the locked name and email beside it: no arrow, nothing to choose. */
.form-select.domain-picker--settled {
    background-image: none;
}

/* The domain picker: a select-looking toggle opening the theme's dropdown, with a filter on top
   and the list below; the backdrop catches a click elsewhere to close it. */
.domain-picker {
    position: relative;
}

.domain-picker-toggle {
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.domain-picker-backdrop {
    position: fixed;
    z-index: 10;
    inset: 0;
}

/* Placed in viewport coordinates by aycDropdown.follow, hidden until it is. Doubled class: the
   theme's .dropdown-menu, loaded after this sheet, would otherwise make it absolute again. */
.dropdown-menu.domain-picker-menu {
    position: fixed;
    z-index: 11;
    margin: 0;
    visibility: hidden;
}

.domain-picker-options {
    max-height: 14rem;
    overflow-y: auto;
}

/* The organization's people matching the search: a dropdown over the rows below, opaque in
   both appearances since it takes the theme's menu background. */
.invite-search {
    position: relative;
}

.invite-search-results {
    position: absolute;
    z-index: 5;
    top: calc(100% + 0.25rem);
    right: 0;
    left: 0;
    max-height: 18rem;
    margin: 0;
    overflow-y: auto;
}

/* One date of the schedule: what it closes on the left, the date on the right. */
.invite-date {
    display: grid;
    grid-template-columns: 1fr 11rem;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.75rem 0;
}

@media (max-width: 575.98px) {
    .invite-date {
        grid-template-columns: 1fr;
    }
}

/* ── Decision document ─────────────────────────────────────────────────────────────────────
   Read in its own window. The decision and what it costs come first, right under the question
   they answer, then who decided and when; the Signal stands out,
   then what each domain brought. Domains are tags; people are never listed. */

.badge.domain-tag {
    background-color: rgba(var(--bs-secondary-rgb), 0.12);
    color: var(--bs-dark, #1e2022);
    font-weight: 500;
}

.session-document {
    container: session-document / inline-size;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    color: var(--bs-body-color);
}

.session-document-title {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 0;
}

.session-document-meta {
    color: var(--bs-secondary-color, #677788);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.session-document-context > :last-child {
    margin-bottom: 0;
}

.session-document-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #677788);
    margin-bottom: 0.35rem;
}

.session-document-decision {
    padding-left: 1rem;
    border-left: 3px solid var(--bs-dark);
}

.session-document-decision-text {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-dark);
    margin-bottom: 1rem;
}

.session-document-section {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1.25rem;
}

.session-document-row {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    gap: 0.75rem;
    align-items: baseline;
    margin-top: 0.6rem;
}

.session-document-row > .domain-tag {
    justify-self: start;
}

.session-document-organization {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
}

/* The protocol closes the document as a small print line, not as content. */
.session-document-footer {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 0.6rem;
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--bs-secondary-color, #677788);
}

.session-document-footer .session-document-label {
    display: inline;
    font-size: 0.65rem;
    margin-right: 0.35rem;
}

.session-document-footer > span:not(.session-document-label):not(:last-child)::after {
    content: " · ";
}

.session-document-memory {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

/* The Signal: what will be looked at, set apart so nobody reads past it. */
.session-signal {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
}

.session-signal-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.session-signal-heading .session-signal-label {
    margin-bottom: 0;
}

.session-signal .session-signal-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-primary);
    margin-bottom: 0.4rem;
}

.session-signal-statement {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-dark);
    margin-bottom: 1rem;
}

.session-signal-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.session-signal-fact {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem;
    background-color: var(--bs-white, #fff);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
}

.session-signal-fact i {
    grid-row: span 2;
    color: var(--bs-primary);
}

.session-signal-fact-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #677788);
}

.session-signal-fact-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-dark);
}

/* With a verdict, the Signal takes the colour of its status badge. */
.session-signal--reached,
.session-signal--notReached,
.session-signal--notObservable {
    background-color: rgba(var(--signal-status-rgb), 0.06);
    border-color: rgba(var(--signal-status-rgb), 0.35);
}

.session-signal--reached { --signal-status-rgb: 0, 150, 110; }
.session-signal--notReached { --signal-status-rgb: 220, 53, 69; }
.session-signal--notObservable { --signal-status-rgb: 200, 120, 0; }

.session-signal--reached .session-signal-label,
.session-signal--reached .session-signal-fact i,
.session-signal--notReached .session-signal-label,
.session-signal--notReached .session-signal-fact i,
.session-signal--notObservable .session-signal-label,
.session-signal--notObservable .session-signal-fact i {
    color: rgb(var(--signal-status-rgb));
}

.session-signal--none,
.session-signal--noSignal {
    background-color: rgba(var(--bs-secondary-rgb), 0.06);
    border-color: var(--bs-border-color);
}

.session-signal--none .session-signal-label,
.session-signal--noSignal .session-signal-label {
    color: var(--bs-secondary-color, #677788);
}

.session-signal--none .session-signal-statement {
    font-weight: 500;
}

/* Everything the app tells the member in the thread takes one form: what stands, then the action.
   A ghost card, so it informs without competing with the thread's messages. The actions sit on the
   right, centred on the text, or under the text once the card is too narrow to hold both side by
   side — still on the right, as "Send" under the field. Beside the text, a button's label never
   wraps: the text gives way. */
.session-notice {
    container-type: inline-size;
}

.session-notice-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.875rem 1.5rem;
    align-items: center;
}

.session-notice-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.session-notice-actions .btn {
    white-space: nowrap;
}

/* Several actions stacked beside the text, each as wide as the widest; under the text, they line
   up side by side, and wrap only when the line cannot hold them. */
.session-notice-actions-stack {
    display: grid;
    gap: 0.5rem;
}

/* A section whose text is long enough to be read first: the action always sits under it. */
.session-notice-stacked {
    grid-template-columns: minmax(0, 1fr);
}

@container (max-width: 34rem) {
    .session-notice-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .session-notice-actions-stack {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }

    /* On one line the stack is as wide as its buttons; once they wrap it spans the card, and each
       button fills its row: stacked and as wide as each other, as beside the text. */
    .session-notice-actions-stack > .btn,
    .session-notice-actions-stack > .form-control {
        flex: 1 1 auto;
    }

    /* A field in the stack, such as a date, is as wide as it needs on the line, as a button is. */
    .session-notice-actions-stack > .form-control {
        width: auto;
    }

    /* Under the text a button has the whole card: its label wraps only when even that is too narrow. */
    .session-notice-actions .btn {
        white-space: normal;
    }

    /* An address to correct, on a narrow card: the field, sending it, then the next address, one under
       the other and each as wide as the card, rather than a field squeezed beside two buttons. */
    .session-invitation-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── The card heading the conversation ─────────────────────────────────────────────────────
   The decision on top, then, under a rule, the one step the member has to do now. */
.session-head .session-notice-body + .session-notice-body {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 0.0625rem solid var(--bs-border-color);
}

.session-head-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.session-head-label .session-document-label {
    margin-bottom: 0;
}

/* Where the step stands among those to do: small, beside its label. */
.session-head-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #677788);
}

.session-head-dots {
    display: inline-flex;
    gap: 0.2rem;
}

.session-head-dots i {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: rgba(var(--bs-secondary-rgb), 0.3);
}

.session-head-dots i.on {
    background-color: var(--bs-primary);
}

/* The document follows its own width, not the screen's: its PDF, always laid out at the width of
   an A4 page, reads the same whichever device downloads it. */
@container session-document (max-width: 40rem) {
    .session-signal-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container session-document (max-width: 28rem) {
    .session-signal-facts,
    .session-document-row {
        grid-template-columns: 1fr;
    }
}

/* Behind a modal, the landing's veil (landing.css, .modal::backdrop): the app's navy, a little
   deeper than the theme's, and the page blurred, so that only the modal reads. The same in both
   appearances, as on the landing. Qualified with html: the theme's files load after this one. */
html .modal-backdrop {
    --bs-backdrop-bg: rgba(19, 33, 68, 0.45);
    --bs-backdrop-opacity: 1;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* A dialog opened over a modal, such as the confirmation to share the document, dims that modal
   too, so that only the question in front is in focus. Bootstrap appends one backdrop per open
   modal: the second one is raised above the first modal, and the dialog above it. */
.modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 1060;
}

#ayc-dialog,
#ayc-action-sheet {
    z-index: 1065;
}

/* ── Signal status ─────────────────────────────────────────────────────────────────────────
   Five states, always a badge, each its own colour: in progress, reached, not reached, not
   observable yet, no Signal. */
/* How the decider's decision stands against their sealed position: one tint whatever the verdict,
   since keeping, refining and changing one's mind are all fine outcomes. */
.badge.shift-tag {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    color: rgb(var(--bs-primary-rgb));
    font-weight: 600;
    font-size: 0.8rem;
}

.badge.signal-status {
    --signal-status-rgb: var(--bs-primary-rgb);
    background-color: rgba(var(--signal-status-rgb), 0.12);
    color: rgb(var(--signal-status-rgb));
    font-weight: 600;
}

.badge.signal-status--reached {
    --signal-status-rgb: 0, 150, 110;
}

.badge.signal-status--notReached {
    --signal-status-rgb: 220, 53, 69;
}

.badge.signal-status--notObservable {
    --signal-status-rgb: 200, 120, 0;
}

.badge.signal-status--noSignal {
    --signal-status-rgb: var(--bs-secondary-rgb);
}

/* The team's decision journal: the decision reads first, the rest follows quietly. */
/* The entry's actions hold each on one line; on a phone they take their own row, sharing its width. */
.journal-entry-actions .btn {
    white-space: nowrap;
}

/* On a phone the decision is read before the actions: the status opens the card, the actions close
   it, on their own row, sharing its width. */
@media (max-width: 575.98px) {
    .journal-entry > .card-body {
        display: flex;
        flex-direction: column;
    }

    /* Its d-flex is important and theme.css loads after this file: only a qualified important rule
       lets its two parts join the card's column. */
    .journal-entry .journal-entry-top {
        display: contents !important;
    }

    .journal-entry-top > :first-child {
        align-self: flex-start;
        margin-bottom: 1rem;
    }

    .journal-entry-actions {
        order: 1;
        width: 100%;
        margin-top: 1rem;
        margin-left: 0 !important;
    }

    .journal-entry-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* On a phone each invitee is a card: what concerns the whole person heads it, on the right. */
@media (max-width: 575.98px) {
    .row.invitee-row {
        margin: 0 0 0.75rem;
        padding: 0.25rem 0.25rem 0.5rem;
        border: 0.0625rem solid var(--bs-border-color);
        border-radius: 0.5rem;
    }

    .invitee-row-head {
        min-height: 1.75rem;
    }
}

/* Beside a row on a wider screen, the bin alone. */
.btn.invitee-remove {
    padding-inline: 0.5rem;
}

.journal-entry-decision {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-dark);
    margin-bottom: 0.5rem;
}

/* The theme paints a disabled soft button in one colour, text and background alike: its label
   vanishes. A disabled soft button keeps its soft look, only fainter. theme.css loads after this
   file, so the rule is one class more specific. */
.btn.btn-soft-primary:disabled,
.btn.btn-soft-primary.disabled {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    border-color: transparent;
}

/* ── The composer's place ──────────────────────────────────────────────────────────────────
   When the member's turn is an action, it takes the composer's frame, and the action sits where
   "Send" does. The field's place holds the app's guidance in a dashed slot: not a field, which could
   be typed in, nor the grey of a message. */
/* Nothing can be typed here: the field is greyed as a disabled one is, so it never reads as empty
   and waiting for words. */
.composer-slot-readonly {
    min-height: 2.75rem;
    padding: 0.75rem 0.9375rem;
    border: 0.0625rem solid rgba(var(--bs-secondary-rgb), 0.18);
    border-radius: 0.3125rem;
    background-color: rgba(var(--bs-secondary-rgb), 0.1);
    font-size: 0.8125rem;
    line-height: 1.42;
    color: var(--bs-secondary-color, #677788);
    cursor: not-allowed;
    user-select: none;
}

/* The member's turn: their avatar ringed, the one place in the thread that is theirs to act on. */
.composer-turn > .step-content-wrapper > .step-avatar,
.composer-turn > .step-content-wrapper > .step-icon {
    box-shadow: 0 0 0 0.125rem var(--bs-body-bg, #fff), 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.45);
}

/* Over a field the action asks to fill: the choice made, then what it asks. */
/* A line typed in the composer's place looks like the composer's own field: same type, same room,
   its hint grey and slanted. It sits in a frame, as the composer's editor does, so that focusing it
   leaves the frame as it is. */
.composer-slot-input {
    display: block;
    width: 100%;
    padding: 0.75rem 0.9375rem;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.42;
}

.composer-slot-input::placeholder {
    color: #adb5bd;
    font-style: italic;
}

/* As the composer's editor: no ring when focused. The dark theme rings every focused element and
   loads after this file, hence the qualified selector. */
.composer-slot-input:focus,
.composer-slot-input:focus-visible {
    outline: none;
}

/* When to look again: the usual delays and another date, on one line above the field, even on a
   phone. The day they set reads beside the badge. */
.verdict-postpone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.verdict-postpone-day {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--bs-secondary-color, #677788);
}

/* The date field behind "Other date": never seen, it lends the button the device's calendar. */
.verdict-postpone-other {
    position: relative;
    display: inline-flex;
}

.verdict-postpone-calendar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.composer-slot-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-dark);
}

/* The Signal to check, set in the field: what, where, against which threshold. */
.composer-slot-signal {
    display: block;
    color: var(--bs-dark);
    font-weight: 600;
    margin: 0.25rem 0 0.35rem;
}

/* Several actions on one line under a phone's field: their words, a size down, a little closer. */
@media (max-width: 575.98px) {
    .btn.slot-action-compact {
        font-size: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        white-space: nowrap;
    }
}

/* "Not observable yet" keeps the orange of its badge: the theme's warning yellow is too pale on light. */
.text-not-observable {
    color: rgb(200, 120, 0) !important;
}

/* ── The session thread's connector ────────────────────────────────────────────────────────
   The theme draws it from the avatar, which an image cannot carry: it showed under initials and
   never under the teammates. In a session's thread it is drawn from the link between two items
   instead, through the whole thread: a change of step is carried on by its separator. Items attached to the composer sit in
   the text's column. The line's length follows the gap under each item, so that the gap can change
   without the line breaking. */
.step.session-thread .step-item {
    --step-gap: 2.25rem;
    margin-bottom: var(--step-gap);
}

/* What is attached to the composer reads as one block with it, tight together, under the thread. */
.step.session-thread .step-item.step-attached {
    --step-gap: 0.75rem;
}

.step.session-thread .step-icon::after,
.step.session-thread .step-avatar::after {
    content: none;
}

.step.session-thread .step-item.step-linked > .step-content-wrapper::after {
    position: absolute;
    left: 1.3125rem;
    border-left: 0.125rem solid rgba(231, 234, 243, 0.7);
    content: "";
}

.step.session-thread .step-item.step-linked > .step-content-wrapper::after {
    top: 3.375rem;
    height: calc(100% + var(--step-gap) - 4.125rem);
}

.step.session-thread .step-item.step-attached > .step-content-wrapper {
    padding-left: 3.625rem;
}

/* The composer's heading: the member's name, then, beside it, what is read before writing — the
   rules, the count — small and dot-separated, wrapping under the name once too narrow. */
/* The guarantees fold with a cross in the panel's own blue: the theme's cross is used as a shape,
   filled with the panel's text colour in either theme. */
.btn-close.session-guarantees-close {
    color: inherit;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 0.75em auto no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 0.75em auto no-repeat;
    opacity: 1;
    /* A finger-sized target around the same small cross; the margins keep the banner's layout. */
    padding: 0.75em;
    margin: -0.5em -0.5em -0.5em 0;
}

.btn-close.session-guarantees-close:hover,
.btn-close.session-guarantees-close:focus-visible {
    color: inherit;
    opacity: 0.75;
}

.composer-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.75rem;
}

.composer-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--bs-secondary-color, #677788);
}

/* Each piece centres its icons on its text, whether it holds on the line or wraps under the name. */
.composer-context > * {
    display: inline-flex;
    align-items: center;
}

.composer-context > * + *::before {
    content: "·";
    margin-right: 0.5rem;
}

.composer-context .btn-link {
    border: 0;
    font-size: inherit;
    line-height: inherit;
}

.composer-context .bi::before,
.composer-context [class^="bi-"]::before {
    vertical-align: 0;
}

/* On a phone the pieces stand one under the other, their icons in one column: a separator would
   start the second line and push its icon aside. */
@media (max-width: 575.98px) {
    .composer-context {
        flex-direction: column;
        align-items: flex-start;
    }

    .composer-context > * + *::before {
        content: none;
    }

    .composer-context > * > [class^="bi-"]:first-child {
        width: 1em;
        text-align: center;
    }
}

/* Ending the session waits beside the card's title: shown when the title is hovered or focused, and
   always where nothing hovers, a touch screen. In the card's own window on a phone, always shown. */
.session-card-header .session-end {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.session-card-header:hover .session-end,
.session-card-header:focus-within .session-end {
    opacity: 1;
}

@media (hover: none) {
    .session-card-header .session-end {
        opacity: 1;
    }
}

/* ── Session card ──────────────────────────────────────────────────────────────────────────
   The decision and its tags open the card; its way and who is with the member follow in sections. */

.session-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* ── Team ──────────────────────────────────────────────────────────────────────────────────
   The organization's name opens its team. Each section reads as a settings panel: what it is on
   the left, its content on the right; stacked on narrow screens. */

/* ── Pinned while the thread scrolls ──────────────────────────────────────────────────────
   The card heading the thread stays under the navbar, unless the member lets it scroll away, and
   the composer's place at the bottom of the screen: the thread scrolls between both. */
.session-page {
    --session-navbar-height: 3.875rem;
    --session-head-gap: 0.75rem;
}

/* A little room under the navbar, where the thread shows as it is: only the card is glass.
   Qualified with .card because theme.css loads after this file and sets .card's own position. */
.card.session-head-pinned {
    position: sticky;
    top: calc(var(--session-navbar-height) + var(--session-head-gap));
    z-index: 3;
    background-color: transparent;
}

/* The card itself is frosted glass: the messages passing under it stay a blur, never a text that
   competes with its own. The glass is a layer behind the content, not the card: a backdrop filter
   on the card would pin the domain picker's fixed menu (welcome step) to the card instead of the
   viewport. */
.card.session-head-pinned::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background-color: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    content: "";
}

/* The pin rides a rail of no height, pinned where the card is pinned: on the card's corner while
   the card is there, and still at the top once a free card has scrolled away. */
.session-head-rail {
    position: sticky;
    top: calc(var(--session-navbar-height) + var(--session-head-gap));
    z-index: 4;
    display: flex;
    justify-content: flex-end;
    height: 0;
}

.btn.session-head-pin {
    margin-top: 0.5rem;
    margin-right: 0.5rem;
}

.session-head > .card-body {
    padding-right: 2.75rem;
}

/* The thread's column fills the screen under the navbar: the composer ends it at the bottom of the
   screen, and a short thread sits right above it, as in any conversation. */
.session-thread-column {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--session-navbar-height) - 1.75rem);
    min-height: calc(100dvh - var(--session-navbar-height) - 1.75rem);
}

.session-thread-column > .step.session-thread {
    flex: 1 0 auto;
    align-content: flex-end;
}

/* No gap under the composer: the page ends with it, where it is pinned, and it does not move once
   the end is reached. Qualified like the theme's own rules, since theme.css loads after this file. */
.main .content.session-page {
    padding-bottom: 0;
}

.step.session-thread {
    margin-bottom: 0;
}

.step.session-thread > .step-item.composer-turn {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-bottom: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: var(--bs-body-bg, #fff);
}

/* Beside the thread, the session card stays in view too. A narrow screen leaves it no room there:
   the header opens it in its own window. Qualified with .card because theme.css loads after this
   file and sets .card's own position. */
@media (min-width: 768px) {
    .card.session-card {
        position: sticky;
        top: calc(var(--session-navbar-height) + 1rem);
        max-height: calc(100vh - var(--session-navbar-height) - 2rem);
        overflow-y: auto;
    }
}

/* On a phone, the session card's window rises from the bottom of the screen, within the thumb's
   reach, and leaves the top of the thread in sight. The modal shell is shared by every window:
   only the one holding the card is laid out so. */
@media (max-width: 767.98px) {
    #ayc-modal .modal-dialog:has(.session-card-sheet) {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
    }

    #ayc-modal.fade .modal-dialog:has(.session-card-sheet) {
        transform: translateY(100%);
    }

    #ayc-modal.show .modal-dialog:has(.session-card-sheet) {
        transform: none;
    }

    #ayc-modal .modal-dialog:has(.session-card-sheet) .modal-content {
        max-height: 85vh;
        max-height: 85dvh;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* The field grows with what is written up to a few lines, then scrolls within itself: "Send"
   under it never leaves the screen. */
.step.session-thread > .step-item.composer-turn .ql-editor {
    max-height: min(12rem, 30vh);
    overflow-y: auto;
}

/* The thread fades out above the composer rather than being cut. Unpinned, it lies over the gap. */
.step.session-thread > .step-item.composer-turn::before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 1.5rem;
    background: linear-gradient(transparent, var(--bs-body-bg, #fff));
    pointer-events: none;
    content: "";
}

.organization-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.organization-name .page-header-title {
    margin-bottom: 0;
    line-height: 1.2;
}

.organization-title {
    color: var(--bs-heading-color);
}

/* The app's signature after the organization's name: a dot in the app's gradient. */
.brand-dot {
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    margin-left: 0.1em;
    border-radius: 50%;
    background: linear-gradient(135deg, #6fb1fc, #9b4ddb 60%, #c86dd7);
}

.organization-name-icon {
    font-size: 1.1rem;
    color: var(--bs-secondary-color, #677788);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.organization-name:hover .organization-name-icon,
.organization-name:focus-visible .organization-name-icon {
    opacity: 1;
}

.team {
    --team-tile-bg: rgba(var(--bs-secondary-rgb), 0.08);
    --team-muted: #677788;
}

.team-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1.5rem 0;
}

.team-panel + .team-panel {
    border-top: 1px solid var(--bs-border-color);
}

.team-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-dark);
}

.team-panel-text {
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--team-muted);
}

.team-count {
    padding: 0.125rem 0.5rem;
    border-radius: 50rem;
    background-color: rgba(var(--bs-secondary-rgb), 0.14);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--team-muted);
}

/* How full the memory is: twenty facts at most. */
.team-capacity {
    max-width: 12rem;
    margin-top: 1rem;
}

.team-capacity-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    color: var(--team-muted);
}

.team-capacity .progress {
    height: 0.25rem;
    background-color: rgba(var(--bs-secondary-rgb), 0.16);
}

/* People: tiles as many per row as fit whole, photo or initial, name and email, domain. */
.team-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A tile per person: avatar, then who they are — domain on the name's line, the creator's tags
   under the address — so that the text has the tile's whole width. */
.team-person {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--team-tile-bg);
}

.team-person-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.team-person-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-dark);
}

.team-person-you {
    flex-shrink: 0;
    font-weight: 400;
    color: var(--team-muted);
}

/* The creator, named on their tile: who leads the organization is never a guess. */
.team-person-role {
    flex-shrink: 0;
    padding: 0.05rem 0.45rem;
    border-radius: 50rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}

/* The whole address, broken where it must rather than cut. */
.team-person-email {
    font-size: 0.75rem;
    color: var(--team-muted);
    overflow-wrap: anywhere;
}

.team-person-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.team-person-name .domain-tag {
    flex-shrink: 0;
    margin-left: auto;
}

/* A tag that reads what the creator decided and changes it when clicked: grey and dashed while
   off; on, only its icon and its word turn blue. */
.team-credit-tag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 50rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--team-muted);
    background-color: transparent;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.team-credit-tag:hover:not(:disabled) {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    color: var(--bs-primary);
}

.team-credit-tag--on {
    border-color: transparent;
    color: var(--bs-primary);
}

.team-credit-tag--on:hover:not(:disabled) {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.team-credit-tag:disabled {
    cursor: default;
    opacity: 1;
}

/* Adding a person: a tile that opens a form above the people. */
.team-person-add {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px dashed rgba(var(--bs-primary-rgb), 0.45);
    border-radius: 0.75rem;
    background-color: rgba(var(--bs-primary-rgb), 0.04);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-primary);
    text-align: left;
    transition: background-color 0.15s ease;
}

.team-person-add:hover,
.team-person-add:focus-visible {
    background-color: rgba(var(--bs-primary-rgb), 0.09);
}

.team-person-add-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.40625rem;
    height: 2.40625rem;
    border-radius: 50%;
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}

.team-person-form {
    margin-bottom: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
    border-radius: 0.75rem;
    background-color: var(--team-tile-bg);
}

.team-person-form-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.5rem;
}

.team-person-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.team-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--team-muted);
}

.team-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--bs-success);
}

.team-name-readonly {
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    background-color: var(--team-tile-bg);
    font-weight: 600;
    color: var(--bs-dark);
}

.team-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    /* A finger-sized target; the margins keep the text where it was. */
    margin: 0.25rem 0 -0.5rem;
    padding: 0.5rem 0;
    border: 0;
    background: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-primary);
}

/* The memory: the field first, then the facts, newest first. */
.team-add {
    margin-bottom: 1rem;
}

.team-add-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    min-height: 1.125rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--team-muted);
}

.team-add-count {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.team-facts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-fact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 0.75rem;
    background-color: var(--team-tile-bg);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--bs-dark);
}

.team-fact-text {
    flex: 1 1 auto;
    min-width: 0;
}

.team-fact-remove,
.team-person-remove {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.team-fact:hover .team-fact-remove,
.team-fact:focus-within .team-fact-remove,
.team-person:hover .team-person-remove,
.team-person:focus-within .team-person-remove {
    opacity: 1;
}

.team-person-remove {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--team-muted);
    background-color: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.team-person-remove:hover:not(:disabled) {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

/* Kept since a blind pass the reader has not answered: counted, never read, until they have. */
.team-held-back {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(var(--bs-secondary-rgb), 0.3);
    border-radius: 0.75rem;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(var(--bs-secondary-rgb), 0.1) 0 0.5rem,
        rgba(var(--bs-secondary-rgb), 0.03) 0.5rem 1rem);
}

.team-held-back-icon,
.team-empty-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: rgba(var(--bs-secondary-rgb), 0.16);
    color: var(--team-muted);
}

.team-held-back-title,
.team-empty-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-dark);
}

.team-held-back-text,
.team-empty-text {
    display: block;
    font-size: 0.8125rem;
    color: var(--team-muted);
}

.team-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 2rem 1rem;
    border: 1px dashed rgba(var(--bs-secondary-rgb), 0.4);
    border-radius: 0.75rem;
    text-align: center;
}

.team-full {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: rgba(var(--bs-warning-rgb), 0.12);
    font-size: 0.8125rem;
    color: var(--bs-dark);
}

/* Side by side only where the modal is wide enough to leave the content room for two tiles a row. */
@media (min-width: 1200px) {
    .team-panel {
        grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 767.98px) {
    .team-person-form-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Touch screens have no hover: the way to forget a fact stays in sight. */
@media (hover: none) {
    .team-fact-remove,
    .team-person-remove {
        opacity: 1;
    }
}

/* A text link standing alone, such as the sign-in page's: a finger-sized target around the same
   words, the negative margins keeping the lines where they were. */
.tap-target {
    display: inline-block;
    padding: 0.375rem 0;
    margin: -0.375rem 0;
}

/* ── Access ────────────────────────────────────────────────────────────────────────────────
   Where a magic link lands: one card, the logo above it. */

.access-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.access-logo {
    width: 7rem;
    margin-bottom: 2rem;
}

.access-card {
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background-color: var(--ayc-card-bg);
}

.access-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    font-size: 1.35rem;
    color: var(--bs-primary);
}

/* The icon font sits its glyphs slightly under the text's line: centred in the circle, it is not. */
.access-icon i {
    display: flex;
    line-height: 1;
}

.access-icon i::before {
    vertical-align: 0;
}

/* Six digits read at a glance, in two groups as the email writes them. */
.access-code-input {
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    text-align: center;
}

/* ── Welcome ────────────────────────────────────────────────────────────────────────────────
   An invitee's first entry: who they take part as, and what is done with their data. */

.welcome-card-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.35rem;
}

.welcome-card-privacy {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--bs-secondary-color, #677788);
}

@media (max-width: 575.98px) {
    .welcome-card-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A reply still being written ends on a soft caret, so it reads as in progress. */
.streaming-reply > :last-child > :last-child::after {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 1em;
    margin-left: 0.15rem;
    vertical-align: text-bottom;
    border-radius: 1px;
    background-color: currentColor;
    opacity: 0.35;
    animation: streaming-caret 1s steps(2, start) infinite;
}

@keyframes streaming-caret {
    to { visibility: hidden; }
}

/* Who checks the Signal, when several people match: the decider picks one. */
.signal-owner-choice {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
    border-radius: 0.75rem;
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

.signal-owner-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 0.5rem;
}

.signal-owner-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    background-color: var(--ayc-card-bg);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-dark);
    text-align: left;
}

.signal-owner-option i {
    color: var(--bs-secondary-color, #677788);
}

.signal-owner-option--chosen {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.signal-owner-option--chosen i {
    color: var(--bs-primary);
}

/* "À toi": what the sessions wait for from the member. The list scrolls past the height of the
   former notification card; each icon takes its session's stage colour, as the menu dot does. */
.awaiting-menu {
    width: 28rem;
}

/* On a phone the bell sits too far right for the list to hang from it: the list spans the screen
   under the navbar instead. */
@media (max-width: 575.98px) {
    .awaiting-menu.show {
        position: fixed !important;
        inset: 3.875rem 0.75rem auto 0.75rem !important;
        width: auto;
        transform: none !important;
    }
}

.awaiting-list {
    max-height: 21.25rem;
    overflow-y: auto;
}

.avatar.awaiting-avatar {
    background-color: rgba(var(--session-stage-rgb), 0.1);
    color: rgb(var(--session-stage-rgb));
}

.avatar.awaiting-avatar .avatar-initials {
    color: inherit;
}

.awaiting-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The session's way, from the first minute: done steps checked, the current one standing out,
   those to come quieter. Each dot takes its step's colour. */
.session-journey {
    list-style: none;
    margin: 0;
    padding: 0;
}

.session-journey-step {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding-bottom: 1rem;
}

.session-journey-step:last-child {
    padding-bottom: 0;
}

.session-journey-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 1.25rem;
    bottom: 0;
    border-left: 2px solid var(--bs-border-color);
}

.session-journey-dot {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    border-radius: 50%;
    border: 2px solid rgb(var(--session-stage-rgb));
    background-color: var(--bs-body-bg);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
}

.session-journey-step--done .session-journey-dot,
.session-journey-step--current .session-journey-dot {
    background-color: rgb(var(--session-stage-rgb));
}

.session-journey-step--upcoming .session-journey-dot {
    border-color: var(--bs-border-color);
}

.session-journey-label {
    display: block;
    color: var(--bs-body-color);
}

.session-journey-step--current .session-journey-label {
    font-weight: 600;
    color: var(--bs-heading-color, var(--bs-body-color));
}

.session-journey-step--upcoming .session-journey-label,
.session-journey-when {
    color: var(--bs-secondary-color);
}

/* Each detail of a step on a line of its own: its day, then, on the current step, where it stands. */
.session-journey-when {
    display: block;
}

/* The session card in three parts, one place for each thing: the decision, its way, and who is
   with the member. Each part after the first opens with a thin rule and, when it needs one, a label. */
.session-card-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--bs-secondary-rgb), 0.15);
}

.session-card-section-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.session-card-company {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.session-card-company .min-w-0 {
    min-width: 0;
}

/* The sparring-partner opens who it is: the row reads as it did, the hover says it can be opened. */
.session-card-partner {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin: -0.375rem;
    padding: 0.375rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    text-align: start;
    transition: background-color 0.15s ease;
}

.session-card-partner:hover,
.session-card-partner:focus-visible {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
}

.session-card-partner-icon {
    margin-left: 0.375rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* ── An AI's avatar in the thread opens who it is ─────────────────────────────────────────── */
.step .step-avatar.step-avatar-open {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: none;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.step .step-avatar.step-avatar-open img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.step .step-avatar.step-avatar-open:hover,
.step .step-avatar.step-avatar-open:focus-visible {
    box-shadow: 0 0 0 0.125rem var(--bs-body-bg, #fff), 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.45);
    outline: 0;
}

/* ── Who an AI of the session is ──────────────────────────────────────────────────────────── */
.partner-sheet {
    max-width: 38rem;
    margin: 0 auto;
}

.partner-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.08), rgba(var(--bs-primary-rgb), 0.02));
}

.partner-avatar {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 0.25rem var(--bs-body-bg, #fff);
}

.partner-role {
    min-width: 0;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bs-dark);
}

.partner-section {
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.partner-section-title {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-dark);
}

.partner-list {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.partner-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--bs-body-color);
}

.partner-list i {
    flex-shrink: 0;
    margin-top: 0.0625rem;
    color: var(--bs-primary);
}

.partner-list-never i {
    color: var(--bs-secondary-color);
}

.partner-list strong {
    color: var(--bs-dark);
}

/* What the model may get wrong, said plainly, with the safeguard that holds. */
.partner-fallible {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: rgba(var(--bs-secondary-rgb), 0.08);
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.partner-fallible i {
    flex-shrink: 0;
    margin-top: 0.0625rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .partner-hero {
        gap: 1rem;
        padding: 1rem;
    }

    .partner-avatar {
        width: 4rem;
        height: 4rem;
    }
}

/* Where the thread moves to another step: the theme's divider, in the step's colour. */
.step-divider.thread-stage {
    color: rgb(var(--session-stage-rgb));
}

/* An explanation behind an info icon: wide enough to read, never wider than a phone, with room
   around the text. */
.dropdown-menu.info-dropdown-menu {
    width: min(22rem, calc(100vw - 2rem));
    padding: 1rem 1.25rem;
    font-size: .8125rem;
    line-height: 1.5;
    white-space: normal;
}

.info-dropdown-menu p {
    margin-bottom: .75rem;
}

.info-dropdown-menu p:last-child {
    margin-bottom: 0;
}

/* How a figure reads: the colour itself, dark enough to stay legible as text. */
.health-good { color: #077c5f; }
.health-watch { color: #b25e00; }
.health-poor { color: #c9294f; }
.health-early { color: var(--bs-secondary-color); }

.health-dot {
    display: inline-block;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background-color: currentColor;
}

/* ── Session credits ───────────────────────────────────────────────────────────────────────
   The launch step of the preparation panel: the balance first, then, when a credit is missing or
   more are wanted, the packs as cards side by side and the checkout under them. */

.credits-balance {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
}

.credits-balance-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--bs-secondary);
    background-color: rgba(var(--bs-secondary-rgb), 0.1);
}

.credits-balance--ready .credits-balance-icon,
.credits-balance-icon--ready {
    color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), 0.12);
}

.credits-balance--empty .credits-balance-icon,
.credits-balance-icon--empty {
    color: var(--bs-warning);
    background-color: rgba(var(--bs-warning-rgb), 0.14);
}

.credits-shop-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 1.5rem 0 0.75rem;
}

.credit-packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.credit-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 1rem 1.125rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.credit-pack:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
}

.credit-pack:focus-within {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}

.credit-pack--selected {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    box-shadow: 0 0 0 1px var(--bs-primary);
}

.credit-packs--locked .credit-pack {
    cursor: default;
    opacity: 0.6;
}

.credit-pack-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.credit-pack-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.credit-pack-check {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--bs-border-color);
}

.credit-pack--selected .credit-pack-check {
    color: var(--bs-primary);
}

.credit-pack--selected .credit-pack-label {
    color: var(--bs-primary);
}

.credit-pack-price {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-heading-color, var(--bs-body-color));
}

.credit-pack-unit {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* A single offer beside the checkout: the offer on the left, the payment on the right; one above the
   other once too narrow. Nothing to choose, so no mark of choice. */
.credits-single {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0.75rem;
}

.credit-pack--only {
    justify-content: center;
    cursor: default;
}

.credit-pack--only:hover {
    border-color: var(--bs-border-color);
}

@media (max-width: 575.98px) {
    .credits-single {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The checkout: who takes the payment on the left, the one action on the right, under the text once
   too narrow. The same place then says where the payment stands. */
.credits-checkout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1rem 1.125rem;
    border-radius: 0.75rem;
    background-color: rgba(var(--bs-secondary-rgb), 0.07);
}

.credits-checkout-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--bs-primary);
}

.credits-checkout-text {
    flex: 1 1 14rem;
    min-width: 0;
    font-size: 0.875rem;
}

.credits-checkout-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

/* The organization's credits: the balance heads their own section, for whoever spends it; on each
   person's row, for the organization's owner, a switch opens the credits to them. */
/* The balance in a card of its own, apart from the section's explanations: it is what the
   section is read for. */
.team-credits {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
    border-radius: 0.75rem;
    background-color: var(--team-tile-bg);
    font-size: 0.875rem;
}

.team-credits-balance {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Whom to ask for the credits, under the people's explanation: the card's look, smaller words. */
.team-credits--ask {
    align-items: flex-start;
    margin-top: 1.25rem;
    border-color: var(--bs-border-color);
}

.team-credits-text {
    display: block;
    font-size: 0.75rem;
    color: var(--team-muted);
}

.team-credits .credits-balance-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
}

/* What a window's last action did, pinned at the top of its scrolling body: an action taken far
   down the window still shows its outcome, over an opaque ground so that the content does not
   show through it. */
.modal-messages {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    gap: .5rem;
    padding: .75rem 0 .5rem;
    background-color: var(--bs-modal-bg, var(--bs-body-bg, #fff));
}

/* The message on one line with its close, centred on it and in its own colour. */
.modal-message {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.modal-message-close {
    flex-shrink: 0;
    margin-left: auto;
    padding: .25rem;
    border: 0;
    background: none;
    color: inherit;
    font-size: .95rem;
    line-height: 1;
}

/* The icon's strokes thickened, so that the close reads at a glance. */
.modal-message-close i {
    -webkit-text-stroke: .7px currentColor;
}

.modal-message-close:hover,
.modal-message-close:focus-visible {
    filter: brightness(.8);
}

/* The admin window's two parts, as one segmented control: the active one stands out on a raised
   ground, the other stays readable. */
.admin-tabs {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    border-radius: .75rem;
    background-color: var(--bs-tertiary-bg, rgba(140, 152, 164, .12));
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--bs-secondary-color, #677788);
    font-size: .9rem;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.admin-tab:hover {
    color: var(--bs-emphasis-color, #1e2022);
}

.admin-tab.active {
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-primary, #377dff);
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08);
}

.admin-tab:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb, 55, 125, 255), .5);
    outline-offset: 2px;
}

.admin-credits-search {
    max-width: 32rem;
}

/* A deletion asked for, in the fixed header between the menu and the account: always in sight,
   never over the page. Once the row has no room for it whole (header.js turns the header
   compact), it gives way to a sign in the bell's place. */
.account-deletion-notice {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    margin-left: auto;
    margin-right: .75rem;
    padding: .25rem .25rem .25rem .75rem;
    border-radius: 2rem;
    background-color: rgba(245, 202, 153, .15);
    color: var(--bs-warning);
    font-size: .8125rem;
}

.account-deletion-notice-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.account-deletion-notice-sign {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    line-height: 1;
}

.account-deletion-notice .btn {
    flex-shrink: 0;
    border-radius: 2rem;
}

/* What only the compact header shows: the sign and its menu, and "À toi" in the account menu. */
.account-deletion-compact {
    display: none;
}

#header.header-compact .account-deletion-notice {
    display: none;
}

#header.header-compact li.account-deletion-compact {
    display: list-item;
}

#header.header-compact div.account-deletion-compact {
    display: block;
}

/* The notice's menu: the date on one line, the choice below (doubled: the theme sizes its navbar
   menus). */
.dropdown-menu.account-deletion-menu {
    min-width: 16rem;
}

/* The bell gives way to the sign but its list stays: the account menu opens it, against a toggle
   that takes no room. */
#header.header-compact .nav-item.awaiting-yields {
    width: 0;
}

#header.header-compact .nav-item.awaiting-yields > .dropdown > .btn {
    width: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    visibility: hidden;
}


/*------------------------------------
  Login
------------------------------------*/
/* The way in shows rather than tells. The cover is one picture in the landing's style, its tinted
   ground and frosted card with two lights drifting behind; the form has one place to look, the
   field, and one thing to do, the button. app-dark.css sets the dark ground, glass and tints. */
.login {
    --login-cover-bg: #f5f7fb;
    --login-glass-bg: rgba(255, 255, 255, 0.55);
    --login-glass-border: rgba(140, 152, 164, 0.18);
    --login-glass-highlight: rgba(255, 255, 255, 0.5);
    --login-bubble-bg: rgba(255, 255, 255, 0.75);
    --login-light: 0.22;
    --login-shadow: 0 1.25rem 3rem -0.75rem rgba(55, 62, 98, 0.22);
    --login-offer-rgb: 0, 150, 110;
    background-color: var(--bs-body-bg, #fff);
}

/* ── Cover ── */
.login-cover {
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 6rem 3rem;
    background-color: var(--login-cover-bg);
    overflow: hidden;
}

.login-logo {
    position: absolute;
    top: 1.5rem;
    left: 2rem;
}

.login-logo img,
.login-logo-mobile img {
    height: 2rem;
    width: auto;
}

/* A picture, not a control: nothing in it answers the pointer, so nothing in it looks clickable. */
.login-visual {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 24rem;
    pointer-events: none;
    user-select: none;
}

/* Two lights in the app's colours circling behind the glass, as on the landing's hero. */
.login-visual::before,
.login-visual::after {
    position: absolute;
    z-index: -1;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(36px);
    opacity: var(--login-light);
    animation: login-orbit 16s ease-in-out infinite;
    content: "";
}

.login-visual::before {
    top: -14%;
    left: -12%;
    background: #377dff;
}

.login-visual::after {
    right: -12%;
    bottom: -16%;
    background: #b84fc9;
    animation-name: login-orbit-back;
}

@keyframes login-orbit {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(55%, 10%) scale(1.1); }
    50% { transform: translate(45%, 55%) scale(0.95); }
    75% { transform: translate(-5%, 40%) scale(1.05); }
}

@keyframes login-orbit-back {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-55%, -10%) scale(1.1); }
    50% { transform: translate(-45%, -55%) scale(0.95); }
    75% { transform: translate(5%, -40%) scale(1.05); }
}

.login-visual-label {
    display: block;
    margin-bottom: 0.875rem;
    font-size: 0.9375rem;
    color: var(--bs-secondary-color);
}

.login-card {
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--login-glass-border);
    border-radius: 1rem;
    background: var(--login-glass-bg);
    box-shadow: var(--login-shadow), inset 0 1px 0 var(--login-glass-highlight);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
}

.login-card-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.login-card-question {
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bs-heading-color);
}

/* Decided, in its step's colour, as plain words: the verdict below keeps the only badge. */
.login-card-decided {
    color: rgb(var(--session-stage-rgb));
    font-weight: 600;
}

.login-card-journey .session-journey-dot .bi-check {
    font-size: 0.875rem;
}

/* The first message of a session, as the thread shows it: who asks, the question, the reply to come. */
.login-opener-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.login-opener-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.login-opener-name {
    display: block;
    font-weight: 600;
    line-height: 1.2;
    color: var(--bs-heading-color);
}

.login-opener-role {
    display: block;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.login-opener-bubble {
    margin: 0 0 0 3.25rem;
    padding: 0.875rem 1rem;
    border-radius: 0.25rem 0.875rem 0.875rem 0.875rem;
    background: var(--login-bubble-bg);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--bs-heading-color);
}

/* ── Form ── */
/* The form sits in the middle of its column, on a phone too, between the logo and the terms. */
.login .login-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.25rem;
}

.login-form {
    width: 100%;
    max-width: 24rem;
    margin-block: auto;
}

.login-logo-mobile {
    width: 100%;
    max-width: 24rem;
    margin-bottom: 2rem;
}

.login-title {
    margin-bottom: 1.75rem;
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.login-field {
    position: relative;
}

.login-field > i {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.login .login-field .form-control,
.login .login-code {
    min-height: 3.25rem;
    border-radius: 0.625rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login .login-field .form-control {
    padding-left: 2.75rem;
}

/* An example, never mistaken for an address already there: the dark theme draws it nearly white. */
.login .login-field .form-control::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.8;
}

.login .login-field .form-control:focus,
.login .login-code:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.12);
}

/* The code keeps the app's own look (.access-code-input); its placeholder stays faint. */
.login .login-code::placeholder {
    color: var(--bs-border-color);
}

/* The address given, settled, with what was done with it and the way to change it, in one line. */
.login-sent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.25rem;
    margin: 0 0 0.75rem;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: 0.625rem;
    background: rgba(var(--bs-primary-rgb), 0.06);
    font-size: 0.875rem;
}

.login-sent strong {
    color: var(--bs-heading-color);
    font-weight: 600;
}

.login-aside {
    display: block;
    margin: 0.625rem 0 0;
    font-size: 0.8125rem;
}

.login-submit {
    margin-top: 1rem;
    min-height: 3.25rem;
    border-radius: 0.625rem;
    font-weight: 600;
}

.login-submit .bi-arrow-right {
    display: inline-block;
    transition: transform 0.15s ease;
}

.login-submit:hover .bi-arrow-right {
    transform: translateX(3px);
}

/* A title's one line of why, under it. */
.login-lead {
    margin: 0 0 1.75rem;
    font-size: 0.9375rem;
    color: var(--bs-secondary-color);
}

/* What it costs: quiet words, only the checks in the Signal's green. */
.login-reassure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.login-reassure li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.login-reassure .bi-check2 {
    color: rgb(var(--login-offer-rgb));
}

.login-next {
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.login-terms {
    margin-top: 2.5rem;
    font-size: 0.75rem;
    text-align: center;
}

@media (min-width: 992px) {
    .login .login-main {
        justify-content: center;
        padding: 2.5rem 2rem 1.5rem;
    }

    .login-terms {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-visual::before,
    .login-visual::after {
        animation: none;
    }
}