/* =============================================================================
   FYSH — Private Offer Tracker (production)
   CR: fysh-bid-prod-2026-06-28
   Mobile-first. Loaded by bid-sessions.php and bid-session.php via $page_css.
   Visual language inherited from /bid-tool/ concept.
============================================================================= */

/* ═══════════════════════════════════════════════════════════════════════════
   BID-SESSIONS DASHBOARD (workbench/bid-sessions.php)
═══════════════════════════════════════════════════════════════════════════ */

/* ── Initiate panel ─────────────────────────────────────────────────────── */
.bss-initiate {
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--gold);
}
.bss-initiate__header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}
.bss-initiate__header > .ti {
    font-size: 22px;
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 2px;
}
.bss-initiate__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 0.25rem;
}
.bss-initiate__sub {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}

/* EOI eligible list */
.bss-eoi-list { display: flex; flex-direction: column; gap: 0; }

.bss-eoi-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.bss-eoi-row:first-child { border-top: none; }

.bss-eoi-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bss-eoi-row__prop {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}
.bss-eoi-row__area {
    font-weight: 400;
    color: var(--muted);
    font-size: 0.8rem;
}
.bss-eoi-row__buyer {
    font-size: 0.78rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.bss-eoi-row__buyer .ti { font-size: 12px; }
.bss-eoi-row__price {
    font-size: 0.78rem;
    color: var(--muted);
}
.bss-eoi-row__form { flex-shrink: 0; }

/* Session list */
.bss-list-heading {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 0.85rem;
}

.bss-session-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--border);
    text-decoration: none;
    transition: background 0.12s;
}
.bss-session-row:first-of-type { border-top: none; }
.bss-session-row:hover { background: var(--cream); margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }

.bss-session-row__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bss-session-row__prop {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bss-session-row__area { font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.bss-session-row__party {
    font-size: 0.75rem;
    color: var(--muted);
}

.bss-session-row__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.bss-session-row__price {
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--navy);
}
.bss-session-row__meta > .ti { font-size: 14px; color: var(--muted); }

/* Status pills */
.bss-status {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}
.bss-status--invited    { background: rgba(30,91,168,.1);   border-color: rgba(30,91,168,.3);   color: var(--blue); }
.bss-status--active     { background: rgba(45,122,79,.1);   border-color: rgba(45,122,79,.3);   color: #2D7A4F; }
.bss-status--accepted   { background: rgba(45,122,79,.15);  border-color: rgba(45,122,79,.4);   color: #1A5E36; }
.bss-status--concluded  { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.38); color: #7A5700; }
.bss-status--ended      { background: rgba(200,60,60,.1);   border-color: rgba(200,60,60,.25);  color: #8B1A1A; }

/* ═══════════════════════════════════════════════════════════════════════════
   BID SESSION (workbench/bid-session.php)
═══════════════════════════════════════════════════════════════════════════ */

/* ── Property header ────────────────────────────────────────────────────── */
.bs-prop-header {
    background: var(--navy);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.85rem;
}
.bs-prop-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.bs-prop-ref {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.bs-ref-id {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}
.bs-back-link {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    white-space: nowrap;
}
.bs-back-link:hover { color: var(--gold-lt, #E8C96A); }
.bs-back-link .ti   { font-size: 12px; }

.bs-prop-header__addr {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0.75rem;
}
.bs-prop-header__addr .ti { font-size: 11px; }

.bs-prices {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.bs-price-cell { text-align: left; }
.bs-price-cell__label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.38);
}
.bs-price-cell__val {
    font-family: var(--font-mono, monospace);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}
.bs-price-cell__val--live    { color: var(--gold-lt, #E8C96A); }
.bs-price-cell__val--agreed  { color: #5FD08A; }
.bs-price-cell__val--sm      { font-size: 0.78rem; }
.bs-price-cell--parties      { margin-left: auto; text-align: right; }

.bs-you-pill {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    margin-right: 4px;
}
.bs-you-pill--vendor { background: var(--navy); color: var(--gold-lt); border: 1px solid var(--gold); }
.bs-you-pill--buyer  { background: var(--blue);  color: #fff; }

/* ── Timer ──────────────────────────────────────────────────────────────── */
.bs-timer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    padding: 0.45rem 0;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}
.bs-timer .ti { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.bs-timer__label { color: var(--muted); flex-shrink: 0; }
.bs-timer__track {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.bs-timer__fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s;
}
.bs-timer__fill--ok   { background: #2D7A4F; }
.bs-timer__fill--warn { background: var(--gold); }
.bs-timer__fill--crit { background: #C83C3C; }
.bs-timer__val {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--navy);
    min-width: 100px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Invite banner ──────────────────────────────────────────────────────── */
.bs-invite-banner {
    background: rgba(201,168,76,0.10);
    border: 1.5px solid rgba(201,168,76,0.40);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.bs-invite-banner > .ti { font-size: 20px; color: var(--gold); }
.bs-invite-banner__copy {
    font-size: 0.85rem;
    color: var(--navy);
    line-height: 1.55;
}
.bs-invite-banner__form { margin-top: 0.25rem; }
@media (min-width: 640px) {
    .bs-invite-banner { flex-direction: row; align-items: center; }
    .bs-invite-banner__copy { flex: 1; }
    .bs-invite-banner__form { flex-shrink: 0; }
}

/* ── Main layout: mobile stacks, desktop side-by-side ───────────────────── */
.bs-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 900px) {
    .bs-layout {
        flex-direction: row-reverse; /* action panel right */
        align-items: flex-start;
        gap: 1.5rem;
    }
    .bs-action-col  { flex: 0 0 320px; position: sticky; top: 80px; }
    /* Cap and centre the timeline so left/right hugging response cards stay
       close to the middle on wide desktops instead of flung to the edges. The
       action panel width is unchanged. */
    .bs-timeline-col { flex: 1 1 auto; min-width: 0; max-width: 680px; margin-inline: auto; }
}

/* ── Action card ────────────────────────────────────────────────────────── */
.bs-action-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* State displays (waiting, concluded, etc.) */
.bs-action-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    gap: 0.4rem;
}
.bs-action-state .ti      { font-size: 2rem; margin-bottom: 0.25rem; }
.bs-action-state strong   { font-size: 0.92rem; font-weight: 700; color: var(--navy); }
.bs-action-state p        { font-size: 0.8rem; color: var(--muted); line-height: 1.5; margin: 0; }
.bs-action-state--waiting .ti   { color: var(--muted); }
.bs-action-state--accepted .ti  { color: #2D7A4F; }
.bs-action-state--accepted strong { color: #1A5E36; }
.bs-action-state--concluded .ti { color: var(--gold); }
.bs-action-state--ended .ti     { color: #C83C3C; }

/* Conclude + download buttons inside action card */
.bs-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 1rem;
    width: calc(100% - 2rem);
}
.bs-audit-note {
    font-size: 0.7rem;
    color: var(--muted);
    text-align: center;
    padding: 0.5rem 1rem 1rem;
    line-height: 1.45;
    margin: 0;
}

/* Offer form */
.bs-action-form__who {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--navy);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.bs-action-form__name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    display: block;
}
.bs-action-form__role {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.45);
    display: block;
}

.bs-form { padding: 0.85rem 1rem; }

.bs-form__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin-bottom: 0.35rem;
}
.bs-form__opt { font-weight: 400; text-transform: none; letter-spacing: 0; }

.bs-form__amount-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0.85rem;
}
.bs-form__gbp {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--muted);
    line-height: 1;
}
.bs-form__input {
    flex: 1;
    font-size: 1.4rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    background: var(--cream, #EDF2F8);
    min-width: 0;
    /* Remove number spinners */
    -moz-appearance: textfield;
    appearance: textfield;
}
.bs-form__input::-webkit-outer-spin-button,
.bs-form__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bs-form__input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }

.bs-form__textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
    font-family: var(--font-body, inherit);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    resize: vertical;
    background: var(--cream, #EDF2F8);
    color: var(--navy);
    line-height: 1.5;
    margin-bottom: 0.65rem;
}
.bs-form__textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.bs-form__textarea--sm { font-size: 0.78rem; margin-top: 0.4rem; }

/* Toggles */
.bs-toggles { display: flex; flex-direction: column; gap: 2px; margin-bottom: 0.85rem; }
.bs-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 4px 0;
    cursor: pointer;
    user-select: none;
}
.bs-toggle {
    position: relative;
    width: 34px;
    height: 19px;
    flex-shrink: 0;
}
.bs-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.bs-toggle__track {
    position: absolute;
    inset: 0;
    background: #C8D3DE;
    border-radius: 999px;
    transition: background 0.2s;
}
.bs-toggle__input:checked ~ .bs-toggle__track { background: var(--blue); }
.bs-toggle__track--on { background: var(--blue); }
.bs-toggle__knob {
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: left 0.2s;
}
.bs-toggle__input:checked ~ .bs-toggle__knob { left: 17.5px; }
.bs-toggle__knob--on { left: 17.5px; }
.bs-toggle--ro { cursor: default; }
.bs-toggle__label {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.3;
    flex: 1;
}
.bs-toggle-note { margin-left: calc(34px + 0.6rem); }
.bs-on-tag {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blue);
    margin-left: 4px;
    vertical-align: 1px;
}

/* Form action buttons */
.bs-form__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.bs-btn-submit { flex: 1; }

/* ── Soft offer guard — mistyped-value review. CR: fysh-bid-offer-guard-2026-08-27 ── */
.bs-guard {
    background: var(--warning-bg, #FBF1DE);
    border: 1px solid #E7C97A;
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    margin: 0 0 0.7rem;
}
.bs-guard__head {
    display: flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 0.85rem; color: #7A5A08;
}
.bs-guard__head .ti { font-size: 16px; }
.bs-guard__msg {
    margin: 0.35rem 0 0.6rem;
    font-size: 0.85rem; line-height: 1.55; color: var(--slate, #2C3E50);
}
.bs-guard__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.bs-guard__actions .btn { flex: 0 0 auto; }
.bs-guard__edit { margin-left: auto; }

.bs-form__secondary {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.bs-btn-secondary {
    background: none;
    border: none;
    font-size: 0.72rem;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: transparent;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.bs-btn-secondary:hover { color: var(--navy); text-decoration-color: currentColor; }
.bs-btn-withdraw:hover  { color: #C83C3C; }
.bs-btn-secondary .ti   { font-size: 12px; }

/* ── Timeline ────────────────────────────────────────────────────────────── */
.bs-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.bs-timeline-head__label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.bs-parties-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--muted);
}
.bs-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bs-legend-dot--vendor { background: var(--navy); }
.bs-legend-dot--buyer  { background: var(--blue); }
.bs-legend-name { margin-right: 0.35rem; }

.bs-timeline-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.55;
    background: var(--cream, #EDF2F8);
    border-radius: 10px;
    border: 1px dashed var(--border);
}
.bs-timeline-empty .ti { font-size: 2rem; display: block; margin-bottom: 0.5rem; opacity: 0.35; }

/* ── Offer cards ────────────────────────────────────────────────────────── */
.bs-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    animation: bs-in 0.25s ease both;
}
@keyframes bs-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bs-card--vendor  { border-left: 4px solid var(--navy); }
.bs-card--buyer   { border-left: 4px solid var(--blue); }
.bs-card--mine    { } /* subtle distinction handled by header bg below */

/* ── Chat-style alignment  (CR: fysh-bid-chat-align-2026-08-16) ─────────────
   Standard sender/responder convention: the viewer's own cards (.bs-card--mine)
   sit on the RIGHT, the other party's cards on the LEFT, at ~half width so the
   two sides read as a conversation. Party colour is preserved; only the accent
   EDGE flips to the side the card hugs. Terminal/system cards (conclude) and the
   slim pause/resume markers are intentionally left full-width. Alignment relies
   on the existing .bs-card--mine class already emitted by bid-session.php. */
.bs-card--vendor:not(.bs-card--conclude),
.bs-card--buyer:not(.bs-card--conclude) {
    width: min(56%, 440px);
    max-width: 100%;
    margin-right: auto;                 /* other party (incoming) → left */
}
.bs-card--mine:not(.bs-card--conclude) {
    margin-left: auto;                  /* mine (outgoing) → right */
    margin-right: 0;
}
/* Flip the coloured accent to the right edge for the viewer's own cards */
.bs-card--mine.bs-card--vendor { border-left: 1.5px solid var(--border); border-right: 4px solid var(--navy); }
.bs-card--mine.bs-card--buyer  { border-left: 1.5px solid var(--border); border-right: 4px solid var(--blue); }
.bs-card--mine.bs-card--accept { border-right-color: #2D7A4F; }
.bs-card--mine.bs-card--inconc { border-right-color: var(--gold); }

/* Narrower cards → scale the headline amount so it never crowds */
.bs-card--vendor:not(.bs-card--conclude) .bs-card__amount,
.bs-card--buyer:not(.bs-card--conclude)  .bs-card__amount {
    font-size: clamp(1.35rem, 3vw, 1.7rem);
}

/* Small screens: keep the side bias but widen so text breathes */
@media (max-width: 640px) {
    .bs-card--vendor:not(.bs-card--conclude),
    .bs-card--buyer:not(.bs-card--conclude) { width: 88%; }
}

/* ── Consistent vertical rhythm for every timeline item ─────────────────────
   Cards and system markers previously stacked flush (no gap), which read as
   cramped when consecutive items sit on the same side. One uniform gap under
   every direct child of the timeline gives balanced separation throughout. */
.bs-timeline-col > .bs-card,
.bs-timeline-col > .bs-pause-marker { margin-bottom: 0.85rem; }
.bs-timeline-col > .bs-card:last-child,
.bs-timeline-col > .bs-pause-marker:last-child { margin-bottom: 0; }

/* System notices (pause / resume / auto-resume) → centred, inset pill rather
   than a full-bleed bar, so they read as neutral dividers and never touch the
   column edges. Matches the familiar chat "system message" convention. */
.bs-pause-marker {
    max-width: min(90%, 520px);
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}
.bs-pause-marker__text { flex: 0 1 auto; }

.bs-card--accept  { border-left-color: #2D7A4F; background: rgba(45,122,79,0.03); }
.bs-card--conclude { background: var(--navy); border-color: var(--gold); }
.bs-card--inconc  { border-left-color: var(--gold); background: rgba(201,168,76,0.04); }

/* Card header */
.bs-card__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.bs-card--conclude .bs-card__header { border-bottom-color: rgba(255,255,255,0.12); }

.bs-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}
.bs-avatar--vendor { background: var(--navy); color: var(--gold-lt, #E8C96A); }
.bs-avatar--buyer  { background: var(--blue); color: #fff; }

.bs-card__who { flex: 1; min-width: 0; }
.bs-card__name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--navy);
    display: block;
}
.bs-card--conclude .bs-card__name { color: #fff; }
.bs-card__ts {
    font-size: 0.67rem;
    font-family: var(--font-mono, monospace);
    color: var(--muted);
    display: block;
    margin-top: 1px;
}
.bs-card--conclude .bs-card__ts { color: rgba(255,255,255,0.45); }

.bs-you-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--blue);
    color: #fff;
    padding: 1px 5px;
    border-radius: 999px;
    margin-left: 5px;
    vertical-align: middle;
}

.bs-card__badges {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

/* Type badges */
.bs-type-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
}
.bs-type-badge--offer       { background: rgba(15,35,64,.08);  border-color: rgba(15,35,64,.2);   color: var(--navy); }
.bs-type-badge--counter     { background: rgba(30,91,168,.08); border-color: rgba(30,91,168,.2);  color: var(--blue); }
.bs-type-badge--accept      { background: rgba(45,122,79,.1);  border-color: rgba(45,122,79,.3);  color: #1A5E36; }
.bs-type-badge--withdraw    { background: rgba(200,60,60,.08); border-color: rgba(200,60,60,.22); color: #8B1A1A; }
.bs-type-badge--inconclusive{ background: rgba(201,168,76,.1); border-color: rgba(201,168,76,.35);color: #7A5700; }
.bs-type-badge--conclude    { background: rgba(201,168,76,.2); border-color: rgba(201,168,76,.5); color: var(--gold-lt, #E8C96A); }

.bs-offer-n {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--gold-lt, #E8C96A);
}

/* Card body */
.bs-card__body { padding: 0.75rem 0.85rem 0.6rem; }

.bs-card__amount {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.bs-amount-delta {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
}
.bs-amount-delta--neg { color: #C83C3C; }
.bs-amount-delta--pos { color: #2D7A4F; }

.bs-card__cond {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 0.5rem;
}

/* Flags */
.bs-flag {
    margin-top: 0.5rem;
    border-radius: 7px;
    padding: 0.45rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bs-flag .ti { font-size: 13px; margin-right: 5px; vertical-align: -1px; flex-shrink: 0; }
.bs-flag--clarity { background: rgba(201,168,76,0.1); color: #7A5700; border: 1px solid rgba(201,168,76,0.3); }
.bs-flag--info    { background: rgba(100,60,200,0.07); color: #4B35A0; border: 1px solid rgba(100,60,200,0.2); }
.bs-flag--inconc  { background: rgba(200,60,60,0.07); color: #8B1A1A; border: 1px solid rgba(200,60,60,0.18); }
.bs-flag__note    { font-size: 0.72rem; font-weight: 400; line-height: 1.45; margin: 0; }

.bs-accepts-ref {
    margin-top: 0.5rem;
    font-size: 0.76rem;
    color: #1A5E36;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bs-accepts-ref .ti { font-size: 14px; color: #2D7A4F; }

.bs-conclude-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #fff;
    font-size: 0.88rem;
    line-height: 1.55;
}
.bs-conclude-msg .ti { font-size: 22px; color: var(--gold-lt, #E8C96A); flex-shrink: 0; margin-top: 2px; }
.bs-conclude-msg strong { color: var(--gold-lt, #E8C96A); }

/* Read-only toggle row on historical cards */
.bs-card__toggles {
    padding: 0.5rem 0.85rem;
    background: rgba(246,245,242,0.6);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bs-toggle-row-ro {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 3px 0;
}

/* Connector between cards */
.bs-connector {
    display: flex;
    justify-content: center;
    height: 20px;
    align-items: center;
}
.bs-connector__line {
    width: 2px;
    height: 100%;
    background: var(--border);
}

/* ── Concluded audit trail ───────────────────────────────────────────────── */
.bs-audit-trail {
    background: var(--navy);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--gold);
    margin-top: 1.5rem;
}
.bs-audit-trail__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.06);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold-lt, #E8C96A);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    flex-wrap: wrap;
}
.bs-audit-trail__header .ti { font-size: 14px; }
.bs-audit-trail__ts {
    margin-left: auto;
    font-family: var(--font-mono, monospace);
    font-weight: 400;
    color: rgba(255,255,255,0.38);
    font-size: 0.67rem;
    text-transform: none;
    letter-spacing: 0;
}
.bs-audit-trail__agreed {
    padding: 0.6rem 1rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.bs-audit-trail__agreed strong { color: var(--gold-lt, #E8C96A); }

.bs-audit-trail__rows { padding: 0 1rem; }
.bs-audit-row {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.72rem;
}
.bs-audit-row:last-child { border-bottom: none; }
.bs-audit-row__n {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.bs-audit-row__body {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: baseline;
}
.bs-audit-row__party { font-weight: 700; }
.bs-audit-row__party--vendor { color: var(--gold-lt, #E8C96A); }
.bs-audit-row__party--buyer  { color: #7BAAEF; }
.bs-audit-row__type   { color: rgba(255,255,255,0.4); }
.bs-audit-row__val    { font-family: var(--font-mono, monospace); font-weight: 700; color: #fff; }
.bs-audit-row__cond   { width: 100%; font-size: 0.68rem; color: rgba(255,255,255,0.4); line-height: 1.4; }
.bs-audit-row__ts     { width: 100%; font-family: var(--font-mono, monospace); font-size: 0.62rem; color: rgba(255,255,255,0.28); margin-top: 1px; }

.bs-audit-trail__dl { padding: 0.85rem 1rem; }
.bs-audit-trail__note {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.32);
    text-align: center;
    line-height: 1.45;
    margin: 0.5rem 0 0;
}

/* ── Pause feature ───────────────────────────────────────────────────────── */

/* Timer: paused variant */
.bs-timer--paused {
    background: rgba(201,168,76,0.07);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
}
.bs-timer--paused .ti { color: #7A5700; }
.bs-timer--paused .bs-timer__label { color: #7A5700; font-weight: 600; }
.bs-timer__fill--paused {
    background: rgba(201,168,76,0.35);
    animation: bs-pulse 1.8s ease-in-out infinite;
}
@keyframes bs-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* Action panel: paused state */
.bs-action-state--paused .ti { color: #7A5700; }
.bs-action-state--paused strong { color: #7A5700; }
.bs-resume-btn { margin: 0 1rem; width: calc(100% - 2rem); justify-content: center; }

/* Pause row — compact inline form below secondary actions */
.bs-pause-row {
    border-top: 1px solid var(--border);
    padding: 0.65rem 1rem;
    background: rgba(201,168,76,0.04);
}
.bs-pause-form {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.bs-pause-label {
    font-size: 0.72rem;
    color: #7A5700;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.bs-pause-label .ti { font-size: 12px; }
.bs-pause-select {
    font-size: 0.72rem;
    color: var(--navy);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 6px;
    background: var(--white);
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.bs-pause-select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.bs-btn-pause {
    font-size: 0.72rem !important;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid rgba(201,168,76,0.5) !important;
    background: rgba(201,168,76,0.12) !important;
    color: #7A5700 !important;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.bs-btn-pause:hover { background: rgba(201,168,76,0.22) !important; }

/* Pause / resume timeline markers */
.bs-pause-marker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.72rem;
    flex-wrap: wrap;
}
.bs-pause-marker--pause {
    background: rgba(201,168,76,0.09);
    border: 1px solid rgba(201,168,76,0.28);
    color: #7A5700;
}
.bs-pause-marker--resume {
    background: rgba(45,122,79,0.07);
    border: 1px solid rgba(45,122,79,0.22);
    color: #1A5E36;
}
/* Auto-resume (system-triggered) — slightly different shade to distinguish from manual */
.bs-pause-marker--auto {
    background: rgba(30,91,168,0.06);
    border: 1px solid rgba(30,91,168,0.2);
    color: #1E3A5F;
}
.bs-system-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(30,91,168,0.12);
    color: #1E5BA8;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 5px;
    vertical-align: middle;
}
.bs-pause-marker .ti { font-size: 13px; flex-shrink: 0; }
.bs-pause-marker__text { flex: 1; font-weight: 600; }
.bs-pause-marker__ts {
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    opacity: 0.65;
    flex-shrink: 0;
}
.bs-pause-marker__note { width: 100%; font-weight: 400; opacity: 0.75; }

/* ── Bid context bar ─────────────────────────────────────────────────────── */
/* CR: fysh-bid-context-2026-06-28 */
.bs-bid-context {
    background: rgba(15,35,64,0.04);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem 0.65rem;
}
.bs-bid-context__items {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.45rem;
}
.bs-bid-context__item { flex: 1; min-width: 0; }
.bs-bid-context__label {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 3px;
}
.bs-bid-context__amount {
    font-family: var(--font-mono, monospace);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}
.bs-bid-context__amount--theirs { color: var(--blue); }
.bs-bid-context__hint {
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
}
.bs-bid-context__hint .ti   { font-size: 13px; flex-shrink: 0; }
.bs-bid-context__hint--vendor { color: #2D7A4F; }
.bs-bid-context__hint--buyer  { color: #C83C3C; }

/* ── Pause row — spacing fix ─────────────────────────────────────────────── */
.bs-pause-row       { padding: 0.8rem 1rem; }
.bs-pause-form      { gap: 0.65rem; }
.bs-pause-select    { padding: 5px 8px; }

/* ── Latest bid card — heartbeat glow prominence ─────────────────────────── */
/* CR: fysh-bid-poll-2026-06-28 */
@keyframes bs-heartbeat {
    /*  double-pulse: thump–thump … rest */
    0%   { box-shadow: 0 0 0 1px rgba(201,168,76,0.30), 0 2px  8px rgba(201,168,76,0.10); }
    10%  { box-shadow: 0 0 0 3px rgba(201,168,76,0.80), 0 6px 24px rgba(201,168,76,0.45); }
    22%  { box-shadow: 0 0 0 1px rgba(201,168,76,0.25), 0 2px  8px rgba(201,168,76,0.08); }
    34%  { box-shadow: 0 0 0 2px rgba(201,168,76,0.60), 0 4px 18px rgba(201,168,76,0.30); }
    55%  { box-shadow: 0 0 0 1px rgba(201,168,76,0.15), 0 2px  6px rgba(201,168,76,0.06); }
    100% { box-shadow: 0 0 0 1px rgba(201,168,76,0.30), 0 2px  8px rgba(201,168,76,0.10); }
}

.bs-card--latest {
    animation: bs-heartbeat 2.2s ease-in-out infinite;
}
.bs-card--latest.bs-card--vendor,
.bs-card--latest.bs-card--buyer { animation: bs-heartbeat 2.2s ease-in-out infinite; }

/* ── Timeline heading sub-label ──────────────────────────────────────────── */
.bs-timeline-head__left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bs-timeline-head__sort {
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.2;
}
.bs-timeline-head__sort #bs-refresh-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--navy);
}

/* ── Reversed timeline — newest first ───────────────────────────────────── */
/* Connector lines between cards read bottom-to-top (older below) */
.bs-connector__line {
    background: linear-gradient(to bottom, var(--border) 0%, rgba(226,232,240,0.35) 100%);
}

/* ── Vendor savings card (concluded + agreed price only) ─────────────────── */
/* CR: fysh-bid-savings-2026-06-28 */
/* Mirrors .bs-action-state layout: white bg, centred column, consistent padding */
.bs-savings-card {
    border-top: 0.5px solid var(--border);
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem 1.4rem;
    gap: 0.4rem;
}

.bs-savings-card__icon {
    font-size: 1.6rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.15rem;
}

.bs-savings-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.bs-savings-card__msg {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}

.bs-savings-card__msg strong {
    color: var(--navy);
    font-weight: 700;
}

.bs-savings-card__share {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.12s, color 0.12s;
}

.bs-savings-card__share:hover {
    color: var(--navy);
    border-bottom-color: var(--navy);
}

.bs-savings-card__share .ti { font-size: 0.78rem; }

/* ── Buyer meta in vendor invite-sent card ────────────────────────────── */
.bs-buyer-meta {
    margin: 1rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.bs-buyer-meta__row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8rem;
}
.bs-buyer-meta__row dt {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255,255,255,0.5);
    min-width: 110px;
    flex-shrink: 0;
}
.bs-buyer-meta__row dt .ti { font-size: 12px; }
.bs-buyer-meta__row dd { color: var(--white); font-weight: 500; margin: 0; }
.bs-buyer-meta__none { opacity: 0.4; font-style: italic; font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════════════════
   Offer tracker — dual line chart of every offer against the asking price
   CR: fysh-bid-chart-2026-09-04
   Rendered by assets/js/bid-chart.js. Shared by the live session and the demo.
   Distinction never relies on colour alone: line dash + marker shape + direct
   labels + a screen-reader data table separate the two parties in greyscale.
═══════════════════════════════════════════════════════════════════════════ */
.bs-chart {
    background: var(--white, #fff);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 14px;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(15,35,64,.07));
    margin-bottom: 1rem;
    overflow: hidden;
}
.bs-chart__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border, #E2E8F0);
}
.bs-chart__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--navy, #0F2340);
}
.bs-chart__title .ti { font-size: 17px; color: var(--blue, #1E5BA8); }
.bs-chart__controls { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Segmented by-turn / by-time control */
.bs-chart__seg {
    display: inline-flex;
    background: var(--surface-2, #EEF2F8);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 999px;
    padding: 2px;
}
.bs-chart__seg-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: 600 0.76rem var(--font-body, system-ui, sans-serif);
    color: var(--muted, #6B7A8D);
    padding: 5px 12px;
    border-radius: 999px;
    line-height: 1;
    transition: background .15s, color .15s;
}
.bs-chart__seg-btn:hover { color: var(--navy, #0F2340); }
.bs-chart__seg-btn.is-active {
    background: var(--navy, #0F2340);
    color: #fff;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,35,64,.2));
}
.bs-chart__seg-btn:focus-visible { outline: 2px solid var(--blue, #1E5BA8); outline-offset: 2px; }

.bs-chart__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border, #E2E8F0);
    background: var(--white, #fff);
    cursor: pointer;
    font: 600 0.76rem var(--font-body, system-ui, sans-serif);
    color: var(--navy, #0F2340);
    padding: 5px 11px;
    border-radius: 999px;
    line-height: 1;
    transition: background .15s, border-color .15s;
}
.bs-chart__toggle:hover { background: var(--surface-2, #EEF2F8); border-color: var(--border-strong, #CBD5E1); }
.bs-chart__toggle .ti { font-size: 15px; }
.bs-chart__toggle:focus-visible { outline: 2px solid var(--blue, #1E5BA8); outline-offset: 2px; }

.bs-chart__body { padding: 0.85rem 0.9rem 0.6rem; }

/* Legend */
.bs-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 0.5rem;
}
.bs-chart__key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted, #6B7A8D);
}
.bs-chart__key svg line { stroke-width: 2.2; fill: none; }
.bs-chart__key svg rect, .bs-chart__key svg circle { stroke-width: 0; }
.bs-chart__key--vendor svg line, .bs-chart__key--vendor svg rect { stroke: var(--bs-chart-vendor, #C0392B); fill: var(--bs-chart-vendor, #C0392B); }
.bs-chart__key--buyer  svg line, .bs-chart__key--buyer  svg circle { stroke: var(--bs-chart-buyer, #1E8E4E); fill: var(--bs-chart-buyer, #1E8E4E); }
.bs-chart__key--asking svg line { stroke: var(--muted, #6B7A8D); }
.bs-chart__key--agreed svg line { stroke: var(--gold-dark, #A8863A); }

/* Plot */
.bs-chart__plot { width: 100%; }
/* Cap at the 760-unit design width so a wide workbench column does not scale
   the whole chart (lines, markers, labels) up past its intended size. Centred;
   scales down freely on narrow viewports. */
.bs-chart__svg { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; }

.bs-chart__grid { stroke: var(--border, #E2E8F0); stroke-width: 1; }
.bs-chart__tick { stroke: var(--border-strong, #CBD5E1); stroke-width: 1; }
.bs-chart__ylab, .bs-chart__xlab {
    fill: var(--muted, #6B7A8D);
    font: 500 11px var(--font-body, system-ui, sans-serif);
}
.bs-chart__axtitle {
    fill: var(--muted, #6B7A8D);
    font: 600 10px var(--font-body, system-ui, sans-serif);
    letter-spacing: 0.02em;
}

.bs-chart__ref { stroke-width: 1.5; fill: none; }
.bs-chart__ref--asking { stroke: var(--muted, #6B7A8D); stroke-dasharray: 2 4; }
.bs-chart__ref--agreed { stroke: var(--gold-dark, #A8863A); stroke-dasharray: 1 4; stroke-width: 1.6; }
.bs-chart__reflab { font: 700 10.5px var(--font-body, system-ui, sans-serif); }
.bs-chart__reflab--asking { fill: var(--muted, #6B7A8D); }
.bs-chart__reflab--agreed { fill: var(--gold-dark, #A8863A); }

.bs-chart__line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.bs-chart__line--vendor { stroke: var(--bs-chart-vendor, #C0392B); }
.bs-chart__line--buyer  { stroke: var(--bs-chart-buyer, #1E8E4E); stroke-dasharray: 7 4; }

.bs-chart__mk { stroke: var(--white, #fff); stroke-width: 1.5; }
.bs-chart__mk--vendor { fill: var(--bs-chart-vendor, #C0392B); }
.bs-chart__mk--buyer  { fill: var(--bs-chart-buyer, #1E8E4E); }

.bs-chart__endlab { font: 700 11px var(--font-body, system-ui, sans-serif); }
.bs-chart__endlab--vendor { fill: var(--bs-chart-vendor, #C0392B); }
.bs-chart__endlab--buyer  { fill: var(--bs-chart-buyer, #1E8E4E); }

.bs-chart__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 120px;
    color: var(--muted, #6B7A8D);
    font-size: 0.85rem;
    text-align: center;
}
.bs-chart__empty .ti { font-size: 20px; opacity: 0.7; }

/* Screen-reader data table — visually hidden, fully readable to assistive tech */
.bs-chart__sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
    .bs-chart__controls { width: 100%; margin-left: 0; justify-content: space-between; }
    .bs-chart__title { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Private limit (advisory, hidden from the other party)
   CR: fysh-bid-private-limits-2026-09-04
   Buyer sets a maximum, vendor a minimum. Warns as live figures approach or
   cross it; never blocks an offer.
═══════════════════════════════════════════════════════════════════════════ */
.bs-limit-card {
    margin-top: 0.9rem;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 12px;
    padding: 0.9rem 1rem 1rem;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(15,35,64,.07));
}
.bs-limit-card__head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.bs-limit-card__title {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 0.88rem; color: var(--navy, #0F2340);
}
.bs-limit-card__title .ti { font-size: 17px; color: var(--blue, #1E5BA8); }
.bs-limit-card__badge {
    display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--muted, #6B7A8D);
    background: var(--surface-2, #EEF2F8);
    border-radius: 999px; padding: 3px 9px;
}
.bs-limit-card__badge .ti { font-size: 12px; }
.bs-limit-card__lead {
    margin: 0 0 0.7rem; font-size: 0.8rem; line-height: 1.5; color: var(--muted, #6B7A8D);
}

.bs-limit-form__row { display: flex; align-items: center; gap: 8px; margin-top: 0.25rem; }
.bs-limit-form__row .bs-form__gbp { flex-shrink: 0; }
.bs-limit-form__row .bs-form__input { flex: 1 1 auto; min-width: 0; }
.bs-limit-form__save { flex-shrink: 0; white-space: nowrap; }
.bs-limit-form__note { margin: 0.45rem 0 0; font-size: 0.72rem; color: var(--muted, #6B7A8D); }

/* Standing-offer status vs the limit */
.bs-limit-status {
    margin: 0.7rem 0 0; padding: 0.55rem 0.7rem; border-radius: 8px;
    font-size: 0.8rem; line-height: 1.45; font-weight: 600;
    background: var(--surface-2, #EEF2F8); color: var(--muted, #6B7A8D);
    border: 1px solid var(--border, #E2E8F0);
}
.bs-limit-status--ok       { background: #E9F5EF; color: #226848; border-color: #B9E0CD; }
.bs-limit-status--approach { background: var(--warning-bg, #FBF1DE); color: #8A6D1F; border-color: #E7C97A; }
.bs-limit-status--breach   { background: #FBE9E7; color: #A32D2D; border-color: #F0B4B4; }

/* Live hint under the offer amount input */
.bs-limit-hint {
    margin: 0.4rem 0 0; padding: 0.4rem 0.6rem; border-radius: 7px;
    font-size: 0.78rem; font-weight: 600; line-height: 1.4;
}
.bs-limit-hint--approach { background: var(--warning-bg, #FBF1DE); color: #8A6D1F; border: 1px solid #E7C97A; }
.bs-limit-hint--breach   { background: #FBE9E7; color: #A32D2D; border: 1px solid #F0B4B4; }

/* Private limit line on the owner's own graph (buyer max / vendor min).
   CR: fysh-bid-limit-alerts-2026-09-04. Violet keeps it distinct from the navy
   and blue party lines, the grey asking line and the gold agreed line. */
.bs-chart__key--limit svg line { stroke: #8250DF; }
.bs-chart__ref--limit    { stroke: #8250DF; stroke-dasharray: 5 3; stroke-width: 1.8; }
.bs-chart__reflab--limit { fill: #8250DF; font: 700 10.5px var(--font-body, system-ui, sans-serif); }

/* Alert toggle inside the private limit card */
.bs-limit-form__alerts { margin-top: 0.7rem; }

/* The legend keys toggle via the hidden attribute; the flex display above would
   otherwise override it, leaving Agreed / Your limit keys always visible. */
.bs-chart__key[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Themed modal — replaces the browser confirm/alert dialogs (accept offer etc.)
   CR: fysh-bid-modal-2026-09-04. Centred on screen, on-brand, dimmed backdrop.
═══════════════════════════════════════════════════════════════════════════ */
.bs-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(15, 35, 64, 0.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    animation: bs-modal-fade .15s ease;
}
.bs-modal__card {
    background: var(--white, #fff);
    border-radius: 16px;
    width: 100%; max-width: 420px;
    padding: 1.6rem 1.5rem 1.25rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(15, 35, 64, .38);
    animation: bs-modal-pop .18s cubic-bezier(.2, .9, .3, 1.2);
}
.bs-modal__icon {
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 0.9rem;
    background: var(--surface-2, #EEF2F8); color: var(--blue, #1E5BA8);
}
.bs-modal__icon .ti { font-size: 27px; }
.bs-modal__card--gold .bs-modal__icon { background: var(--warning-bg, #FBF1DE); color: var(--gold-dark, #A8863A); }
.bs-modal__title {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.2rem; font-weight: 700; color: var(--navy, #0F2340);
    margin: 0 0 0.45rem;
}
.bs-modal__msg {
    font-size: 0.9rem; line-height: 1.55; color: var(--muted, #6B7A8D);
    margin: 0 0 1.3rem;
}
.bs-modal__actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.bs-modal__actions .btn,
.bs-modal__actions .bs-btn-secondary { min-width: 130px; }

@keyframes bs-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bs-modal-pop  { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bs-modal, .bs-modal__card { animation: none; } }

/* Offer tracker line colours (vendor red, buyer green) + per-label toggle chips.
   CR: fysh-bid-chart-labels-2026-09-04. Red/green pair each keeps its distinct
   line dash and marker shape, so the two series stay separable in greyscale and
   for colour vision deficiency. */
.bs-chart { --bs-chart-vendor: #C0392B; --bs-chart-buyer: #1E8E4E; }

.bs-chart__labels {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin: 0 0 0.6rem;
}
.bs-chart__labels-lead {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--muted, #6B7A8D); margin-right: 2px;
}
.bs-chart__lbl {
    cursor: pointer; border-radius: 999px; line-height: 1;
    font: 600 0.74rem var(--font-body, system-ui, sans-serif);
    padding: 4px 10px 4px 22px; position: relative;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E2E8F0);
    color: var(--muted, #6B7A8D);
    transition: background .14s, border-color .14s, color .14s;
}
/* Dot shows the on/off state at a glance */
.bs-chart__lbl::before {
    content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border-strong, #CBD5E1);
}
.bs-chart__lbl.is-on {
    background: var(--surface-2, #EEF2F8);
    border-color: var(--border-strong, #CBD5E1);
    color: var(--navy, #0F2340);
}
.bs-chart__lbl.is-on::before { background: var(--blue, #1E5BA8); }
.bs-chart__lbl[data-lbl="vendor"].is-on::before { background: var(--bs-chart-vendor, #C0392B); }
.bs-chart__lbl[data-lbl="buyer"].is-on::before  { background: var(--bs-chart-buyer, #1E8E4E); }
.bs-chart__lbl:focus-visible { outline: 2px solid var(--blue, #1E5BA8); outline-offset: 2px; }