/* ── Performance Security Deposit ────────────────────────────────────
   Shown to everyone with a stake in a GEM campaign: the member deciding
   whether to reserve, the artist performing it, the Promoter who
   arranged it, and the admin who records the confirmation.

   Deliberately reads as a record rather than as a balance. The notice
   under the figure is a disclaimer of custody, so it is styled to be
   read — not shrunk into fine print a member skips.

   Loaded on both the public site and the panels; every colour has a
   literal fallback because the public theme does not define --p-*
   on every page.
   ──────────────────────────────────────────────────────────────────── */
.psd {
    text-align: left;
    border: 1px solid var(--p-border, #252a3a);
    border-radius: 14px;
    background: var(--p-card, #1c2030);
    overflow: hidden;
}

.psd__head {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--p-border, #252a3a);
    background: linear-gradient(180deg, rgba(56, 189, 248, .07), transparent);
}
.psd__icon {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(56, 189, 248, .14);
    color: #38bdf8;
    font-size: 14px;
    flex: 0 0 auto;
}
.psd__title {
    margin: 0;
    font-size: 15px; font-weight: 800; line-height: 1.3;
    color: var(--p-text, #e2e4f0);
    flex: 1 1 auto;
}

.psd__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px; font-weight: 800; letter-spacing: .02em;
    white-space: nowrap;
}
.psd__chip i { font-size: 10.5px; }
.psd__chip--ok {
    background: rgba(34, 197, 94, .13);
    border-color: rgba(34, 197, 94, .32);
    color: #22c55e;
}
/* Amber, not red: nothing is wrong, the confirmation simply has not arrived. */
.psd__chip--wait {
    background: rgba(245, 158, 11, .13);
    border-color: rgba(245, 158, 11, .32);
    color: #f59e0b;
}

.psd__body { padding: 18px 20px 20px; }

.psd__amount {
    margin: 0;
    font-size: 30px; font-weight: 800; line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--p-text, #e2e4f0);
    font-variant-numeric: tabular-nums;
}
.psd__amount--none {
    font-size: 17px; font-weight: 700;
    color: var(--p-text-soft, #9095b0);
}
.psd__sub {
    margin: 8px 0 0;
    font-size: 12.5px; line-height: 1.7;
    color: var(--p-text-soft, #9095b0);
}
.psd__code {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--p-border, #252a3a);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    color: var(--p-text, #e2e4f0);
    white-space: nowrap;
}

/* The confirmation record. Label above value, so a long company name or a
   code never collides with its own label on a narrow column. */
.psd__record {
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--p-border, #252a3a);
    border: 1px solid var(--p-border, #252a3a);
    border-radius: 10px;
    overflow: hidden;
}
.psd__record > div {
    padding: 11px 14px;
    background: var(--p-card, #1c2030);
}
.psd__record dt {
    margin: 0 0 4px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .9px;
    text-transform: uppercase;
    color: #7d8895;
    line-height: 1.4;
}
.psd__record dd {
    margin: 0;
    font-size: 13.5px; font-weight: 700;
    color: var(--p-text, #e2e4f0);
    word-break: break-word;
}
.psd__status { font-size: 12px; letter-spacing: .04em; }
.psd__status--ok   { color: #22c55e; }
.psd__status--wait { color: #f59e0b; }

/* The disclaimer. Set at reading size on its own ground: it exists to be
   read by a member, not to be a footnote nobody notices. */
.psd__notice {
    margin-top: 18px;
    padding: 15px 17px;
    border-radius: 10px;
    border: 1px solid var(--p-border, #252a3a);
    background: rgba(255, 255, 255, .028);
}
.psd__notice p {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--p-text-soft, #9095b0);
}
.psd__notice p:last-child { margin-bottom: 0; }
.psd__notice-title {
    color: var(--p-text, #e2e4f0) !important;
    font-weight: 800;
}
.psd__notice-title em { font-style: italic; }

@media (max-width: 560px) {
    .psd__head   { padding: 14px 15px; }
    .psd__body   { padding: 15px 15px 17px; }
    .psd__amount { font-size: 25px; }
    .psd__record { grid-template-columns: 1fr; }
}

/* ── Admin: the flags and the confirmation ────────────────────────── */
.psd-flag {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--p-text, #e2e4f0);
}
.psd-flag i { font-size: 13px; margin-top: 2px; flex: 0 0 auto; }
.psd-flag--ok   { background: rgba(34, 197, 94, .1);  border: 1px solid rgba(34, 197, 94, .26); }
.psd-flag--ok i { color: #22c55e; }
.psd-flag--done { background: rgba(34, 197, 94, .1);  border: 1px solid rgba(34, 197, 94, .26); }
.psd-flag--done i { color: #22c55e; }
.psd-flag--warn { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .28); }
.psd-flag--warn i { color: #f59e0b; }

.psd-confirm {
    margin-top: 16px;
    padding: 15px 16px;
    border-radius: 12px;
    border: 1px solid var(--p-border, #252a3a);
    background: rgba(255, 255, 255, .028);
}
/* The tick is an attestation about something outside this platform, so it is
   set at reading size rather than as a checkbox caption. */
.psd-confirm__check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
    cursor: pointer;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--p-text-soft, #9095b0);
}
.psd-confirm__check input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: #22c55e;
    cursor: pointer;
}
.psd-confirm__check:hover span { color: var(--p-text, #e2e4f0); }

/* ── Compact: the public reservation page ────────────────────────────
   A member deciding whether to reserve is asking one question — does
   anyone have money at stake if this show does not happen. So the
   status leads, the amount is the headline, and the legal position
   folds away until it is wanted.

   Green when confirmed, amber while it is not: honest either way, and
   never alarming, because nothing has gone wrong in the amber case.
   ──────────────────────────────────────────────────────────────────── */
.psd--compact {
    position: relative;
    border-color: rgba(34, 197, 94, .3);
    background:
        linear-gradient(180deg, rgba(34, 197, 94, .07), transparent 62%),
        var(--p-card, #1c2030);
    overflow: hidden;
}
/* A quiet edge of colour rather than a badge shouting for attention. */
.psd--compact::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #22c55e, rgba(34, 197, 94, .25));
}
.psd--compact.psd--wait {
    border-color: rgba(245, 158, 11, .3);
    background:
        linear-gradient(180deg, rgba(245, 158, 11, .07), transparent 62%),
        var(--p-card, #1c2030);
}
.psd--compact.psd--wait::before {
    background: linear-gradient(180deg, #f59e0b, rgba(245, 158, 11, .25));
}

.psd--compact .psd__head {
    padding: 13px 16px 11px;
    border-bottom: none;
    background: none;
}
.psd--compact .psd__icon {
    width: 30px;
    height: 30px;
    font-size: 12.5px;
    background: rgba(34, 197, 94, .14);
    color: #22c55e;
}
.psd--compact.psd--wait .psd__icon {
    background: rgba(245, 158, 11, .14);
    color: #f59e0b;
}
.psd--compact .psd__title {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .02em;
}
.psd--compact .psd__chip {
    padding: 4px 9px;
    font-size: 10px;
}

.psd--compact .psd__body { padding: 0 16px 15px; }
.psd--compact .psd__amount {
    font-size: 27px;
    line-height: 1.05;
}
/* The one sentence the block exists for. */
.psd--compact .psd__trust {
    margin: 9px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--p-text-soft, #9095b0);
}
.psd--compact .psd__sub {
    margin-top: 9px;
    font-size: 11px;
}
.psd--compact .psd__code {
    font-size: 11px;
    padding: 1px 7px;
}

/* The legal position, one click away. */
.psd__more {
    margin-top: 12px;
    border-top: 1px solid var(--p-border, #252a3a);
    padding-top: 11px;
}
.psd__more > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    list-style: none;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--p-text-soft, #9095b0);
    transition: color .15s ease;
}
.psd__more > summary::-webkit-details-marker { display: none; }
.psd__more > summary::after {
    content: "\f078";                 /* chevron-down */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: auto;
    font-size: 9px;
    opacity: .6;
    transition: transform .15s ease;
}
.psd__more[open] > summary::after { transform: rotate(180deg); }
.psd__more > summary:hover { color: var(--p-text, #e2e4f0); }
.psd__more > summary i { font-size: 11px; opacity: .8; }
.psd__more .psd__notice {
    margin-top: 11px;
    padding: 12px 13px;
}
.psd__more .psd__notice p { font-size: 11.5px; line-height: 1.75; }

@media (max-width: 560px) {
    .psd--compact .psd__amount { font-size: 24px; }
}

/* The public headline is a share, not a sum: the % sits smaller and lighter so
   the number carries, and a caption says what it is a share OF. */
.psd__pct {
    font-size: .55em;
    font-weight: 800;
    margin-left: 2px;
    color: var(--p-text-soft, #9095b0);
}
.psd__amount-label {
    margin: 2px 0 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--p-text-soft, #9095b0);
}
.psd--compact.psd--ok .psd__amount   { color: #22c55e; }
.psd--compact.psd--wait .psd__amount { color: #f59e0b; }