/* ── Show dates ───────────────────────────────────────────────────────
 *
 * Three stages of increasing certainty. The visual job of this file is to
 * make "not confirmed yet" impossible to miss: a member glancing at a date
 * and booking a flight against it is the failure this design exists to
 * prevent. So an unconfirmed date is deliberately quieter than a confirmed
 * one — soft border, muted ground, the caveat carried right beside the
 * value rather than in small print underneath.
 */

/* ── The chip: the one thing every surface renders ────────────────
 *
 * A stacked block, not a pill. It has to survive a narrow table column, and a
 * pill that wraps to four lines with a 999px radius renders as a circle. The
 * left rail carries the state so the colour reads even when the block is
 * squeezed; the caveat sits under the value and never beside it, so it cannot
 * be the part that gets cut off.
 */

.sd-chip {
    display: inline-block;
    max-width: 100%;
    /* The caveat is the part that must never be the bit that gets crushed.
       In a tight table column the block would otherwise squeeze to five
       lines of one word each; the table scrolls sideways, so a floor here
       costs nothing and keeps the wording readable. */
    min-width: 205px;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid var(--p-border);
    border-left-width: 3px;
    background: var(--p-card);
    font-size: .78rem;
    line-height: 1.35;
}

.sd-chip i {
    font-size: .72rem;
    margin-right: 5px;
}

.sd-chip__head {
    display: inline;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .62rem;
    font-weight: 700;
    color: var(--p-text-soft);
}

.sd-chip strong {
    display: block;
    margin-top: 2px;
    font-weight: 700;
    font-size: .82rem;
    color: var(--p-text);
    letter-spacing: .01em;
}

.sd-chip__caveat {
    display: inline-block;
    margin-top: 5px;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.4;
}

.sd-chip--ok {
    border-color: var(--p-border);
    border-left-color: var(--p-green);
    background: var(--p-green-dim);
}
.sd-chip--ok i { color: var(--p-green); }
.sd-chip--ok .sd-chip__caveat {
    background: rgba(34, 197, 94, .2);
    color: var(--p-green);
}

.sd-chip--soft {
    border-color: var(--p-border);
    border-left-color: var(--p-amber);
    background: var(--p-amber-dim);
}
.sd-chip--soft i { color: var(--p-amber); }
.sd-chip--soft .sd-chip__caveat {
    background: rgba(245, 158, 11, .2);
    color: var(--p-amber);
}

/* ── The banner: the same state, given room ─────────────────────── */

.sd-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border-radius: var(--p-radius-lg);
    border: 1px solid var(--p-border);
    background: var(--p-card);
    margin-bottom: 22px;
}

.sd-banner__mark {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.3rem;
}

.sd-banner__label {
    margin: 0 0 4px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--p-text-soft);
}

.sd-banner__value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--p-text);
    line-height: 1.2;
}

.sd-banner__caveat {
    display: inline-block;
    margin-top: 8px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 4px 10px;
    border-radius: 999px;
}

.sd-banner--ok { border-color: rgba(34, 197, 94, .45); }
.sd-banner--ok .sd-banner__mark {
    background: var(--p-green-dim);
    color: var(--p-green);
}
.sd-banner--ok .sd-banner__caveat {
    background: rgba(34, 197, 94, .18);
    color: var(--p-green);
}

.sd-banner--soft { border-color: rgba(245, 158, 11, .38); }
.sd-banner--soft .sd-banner__mark {
    background: var(--p-amber-dim);
    color: var(--p-amber);
}
.sd-banner--soft .sd-banner__caveat {
    background: rgba(245, 158, 11, .18);
    color: var(--p-amber);
}

/* ── The three stages, as a progression ─────────────────────────── */

.sd-stages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.sd-stage {
    position: relative;
    padding: 16px 16px 16px 18px;
    border-radius: var(--p-radius);
    border: 1px solid var(--p-border-soft);
    background: var(--p-card);
    overflow: hidden;
}

.sd-stage::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--p-border);
}

.sd-stage__n {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 800;
    background: var(--p-border);
    color: var(--p-text-soft);
    margin-bottom: 10px;
}

.sd-stage__name {
    margin: 0 0 6px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--p-text-soft);
}

.sd-stage__value {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--p-text);
}

.sd-stage__empty {
    margin: 0;
    font-size: .88rem;
    color: var(--p-text-soft);
    font-style: italic;
}

/* Set, and it is what members currently see. */
.sd-stage--live::before { background: var(--p-green); }
.sd-stage--live .sd-stage__n {
    background: var(--p-green-dim);
    color: var(--p-green);
}

/* Set, but a later stage has overtaken it. Still part of the record. */
.sd-stage--past::before { background: var(--p-border); }
.sd-stage--past .sd-stage__value {
    color: var(--p-text-soft);
    text-decoration: line-through;
    text-decoration-color: var(--p-text-soft);
}

.sd-stage__note {
    display: block;
    margin-top: 6px;
    font-size: .7rem;
    color: var(--p-text-soft);
}

/* ── Announcement forms ─────────────────────────────────────────── */

.sd-form__reach {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--p-radius);
    background: var(--p-accent-soft);
    border: 1px solid var(--p-accent-dim);
    font-size: .82rem;
    color: var(--p-text-muted);
    margin-bottom: 16px;
}
.sd-form__reach i {
    color: var(--p-accent);
    margin-top: 2px;
}

.sd-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.sd-confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--p-radius);
    border: 1px solid var(--p-border);
    background: var(--p-bg);
    margin: 16px 0;
    cursor: pointer;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--p-text-muted);
}
.sd-confirm-check input { margin-top: 3px; flex: 0 0 auto; }
.sd-confirm-check:hover { border-color: var(--p-accent); }

/* ── History ────────────────────────────────────────────────────── */

.sd-history { list-style: none; margin: 0; padding: 0; }

.sd-history__item {
    position: relative;
    padding: 0 0 20px 26px;
    border-left: 2px solid var(--p-border);
}
.sd-history__item:last-child { padding-bottom: 0; border-left-color: transparent; }

.sd-history__dot {
    position: absolute;
    left: -7px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--p-card);
    border: 2px solid var(--p-border);
}
.sd-history__item--confirmed .sd-history__dot { border-color: var(--p-green); }
.sd-history__item--range .sd-history__dot     { border-color: var(--p-amber); }

.sd-history__label {
    margin: 0;
    font-size: .88rem;
    font-weight: 700;
    color: var(--p-text);
}

.sd-history__prev {
    margin: 4px 0 0;
    font-size: .78rem;
    color: var(--p-text-soft);
}
.sd-history__prev s { opacity: .8; }

.sd-history__meta {
    margin: 6px 0 0;
    font-size: .74rem;
    color: var(--p-text-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Member-facing block (fan dashboard, public page) ───────────── */

.sd-member {
    display: flex;
    /* Top-aligned: the mark belongs beside the label it introduces, not
       floating at the vertical centre of a block whose height depends on how
       long the explanatory line happens to be. */
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--p-radius);
    border: 1px solid var(--p-border);
    background: var(--p-card);
}

.sd-member__mark {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 1rem;
}

.sd-member__label {
    margin: 0 0 2px;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--p-text-soft);
}

.sd-member__value {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--p-text);
    line-height: 1.25;
}

.sd-member__caveat {
    display: inline-block;
    margin-top: 6px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 9px;
    border-radius: 999px;
}

.sd-member--ok { border-color: rgba(34, 197, 94, .45); }
.sd-member--ok .sd-member__mark {
    background: var(--p-green-dim);
    color: var(--p-green);
}
.sd-member--ok .sd-member__caveat {
    background: rgba(34, 197, 94, .18);
    color: var(--p-green);
}

.sd-member--soft { border-color: rgba(245, 158, 11, .38); }
.sd-member--soft .sd-member__mark {
    background: var(--p-amber-dim);
    color: var(--p-amber);
}
.sd-member--soft .sd-member__caveat {
    background: rgba(245, 158, 11, .18);
    color: var(--p-amber);
}

@media (max-width: 900px) {
    .sd-stages { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .sd-banner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .sd-banner__value { font-size: 1.22rem; }
    .sd-months { grid-template-columns: 1fr; }
    .sd-member { align-items: flex-start; }
}

/* Lead paragraph above an announcement form. */
.sd-lead {
    margin: 0 0 16px;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--p-text-soft);
}

/* Record count in a card head. */
.sd-count {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--p-text-soft);
}

/* The line that says what the stage means for someone deciding to travel. */
.sd-member__note {
    margin: 8px 0 0;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--p-text-soft);
}

/* The show date on the public reservation card. */
.p-cdetail__showdate { margin: 0 0 16px; }

/* The show date on a Promoter's campaign card. */
/* Two chips now — the show date and the venue size. A column rather than a
   row: each chip is a stacked block with its own heading, and side by side
   they force the card past its width long before a phone. */
.cc-card__showdate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
}

/* Month + Year, side by side. The month name needs the room; the year does not. */
.sd-monthpick {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 8px;
}

/* ── One line, for a dense list ───────────────────────────────────
 *
 * The admin table and the artist's card have a meta line, not a panel. This
 * sits at that line's size and keeps the caveat attached to the date, because
 * a date without its caveat is the one thing that must never be shown.
 */
.sd-inline {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 11px;
    line-height: 1.5;
}
.sd-inline i { font-size: 10px; }
.sd-inline--ok i   { color: var(--p-green); }
.sd-inline--soft i { color: var(--p-amber); }

.sd-inline__head {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    font-size: 9.5px;
    color: var(--p-text-soft);
}

.sd-inline strong {
    font-weight: 700;
    color: var(--p-text);
}

.sd-inline__flag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.sd-inline--ok .sd-inline__flag {
    background: rgba(34, 197, 94, .18);
    color: var(--p-green);
}
.sd-inline--soft .sd-inline__flag {
    background: rgba(245, 158, 11, .18);
    color: var(--p-amber);
}

/* The show date on the Artist's campaign card. The bottom margin matters when
   the caveat wraps to its own line — without it the pill sits hard against
   the demand bar below. */
.ca-card__date {
    margin: 10px 0 6px;
}

/* ── The date in a stat tile ──────────────────────────────────────
 *
 * A stat value is 26–30px with tight leading and tabular figures, built for
 * "3" or "$35,980". A date forced through that wraps to three shouting lines.
 * This is a deliberately different treatment for a value that is not a number:
 * the short register, sentence case, and the state as a pill rather than a
 * sub-line trying to do a pill's job.
 */
.sd-stat__date {
    display: block;
    margin-top: 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--p-text);
    /* Never mid-word: the en dash in a window is already a break opportunity. */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.sd-stat__flag {
    display: inline-block;
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.4;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
}
.sd-stat__flag--ok {
    background: rgba(34, 197, 94, .18);
    color: var(--p-green);
}
.sd-stat__flag--soft {
    background: rgba(245, 158, 11, .18);
    color: var(--p-amber);
}


/* ── Ticket price ranges ──────────────────────────────────────────────
   The three-stage ticket price reuses everything above: the banner, the
   stage strip, the history and the member block are the same components
   showing a different fact. Only what is genuinely new lives here. */

/* Two amounts as one control, so a range reads as a range rather than as two
   unrelated boxes that happen to sit together. */
.tp-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tp-range__cur {
    font-size: 15px;
    font-weight: 800;
    color: var(--p-text-soft);
    flex: 0 0 auto;
}
.tp-range__to {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--p-text-soft);
    flex: 0 0 auto;
    padding: 0 2px;
}
/* The inputs share what is left. A flex-basis rather than a width so the two
   stay equal however wide the card is. */
.tp-range .p-form-control {
    flex: 1 1 90px;
    min-width: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* The spinner arrows steal width from a short numeric field and are useless on
   an amount somebody types in full. */
.tp-range input[type="number"] { -moz-appearance: textfield; }
.tp-range input[type="number"]::-webkit-outer-spin-button,
.tp-range input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
@media (max-width: 420px) {
    /* Below this the two fields and their symbols cannot share a row without
       each input dropping under ~70px, which is too narrow for "1,250.00". */
    .tp-range { display: grid; grid-template-columns: auto 1fr; row-gap: 8px; }
    .tp-range__to { grid-column: 1 / -1; text-align: center; padding: 0; }
}

/* Stage 2 of the price is shown but not announced, so its reach note must not
   borrow the loud styling of the one that rings every Member's bell. */
.sd-form__reach--quiet {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--p-border);
}
.sd-form__reach--quiet i { color: var(--p-text-soft); }

/* History dots. The date feature's stages are target/range/confirmed; the
   price feature's are forecast/updated/confirmed. "confirmed" is already
   green above — these are the two that were missing. */
.sd-history__item--updated .sd-history__dot  { border-color: var(--p-amber); }
.sd-history__item--forecast .sd-history__dot { border-color: var(--p-border); }


/* ── Venue size picker ────────────────────────────────────────────────
   Six mutually exclusive choices laid out as cards. The native radio is
   hidden but never removed from the document: it still takes focus, still
   answers to arrow keys, and still carries the `required` the form needs. */
.vs-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}
.vs-opt { display: block; cursor: pointer; margin: 0; }

/* Clipped rather than display:none — a display:none radio is skipped by
   keyboard navigation and its validation message has nowhere to point. */
.vs-opt input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.vs-opt__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 84px;
    padding: 14px 10px;
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    background: var(--p-card);
    color: var(--p-text-soft);
    text-align: center;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.vs-opt__box i { font-size: 20px; line-height: 1; }
.vs-opt__name {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.vs-opt:hover .vs-opt__box {
    border-color: var(--p-accent);
    color: var(--p-text);
    transform: translateY(-1px);
}
.vs-opt input:checked + .vs-opt__box {
    border-color: var(--p-accent);
    background: var(--p-accent-dim);
    color: var(--p-accent);
}
/* The focus ring has to live on the box, since the input it belongs to is
   clipped out of sight. */
.vs-opt input:focus-visible + .vs-opt__box {
    outline: 2px solid var(--p-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .vs-opt__box { transition: none; }
    .vs-opt:hover .vs-opt__box { transform: none; }
}


/* ── Forecast Ticket Price disclosure ─────────────────────────────────
   Deliberately not a p-form-hint. The hint above it is grey 12px guidance
   on filling the boxes in; this is a statement about what the number does
   and does not commit the Promoter to, and it has to carry more weight
   than "enter the same amount twice". Amber rather than gold: it is a
   caution, not a call to action, and the form's gold already belongs to
   the submit button. */
.tp-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-left: 3px solid var(--p-amber);
    border-radius: var(--p-radius);
    background: var(--p-amber-dim);
}
.tp-note > i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 15px;
    color: var(--p-amber);
}
.tp-note p {
    margin: 0;
    font-size: 13px;
    /* Looser than the hint above it: this is a paragraph to be read, not a
       line to be glanced at. */
    line-height: 1.75;
    color: var(--p-text);
    max-width: 80ch;
}
.tp-note strong {
    color: var(--p-amber);
    letter-spacing: 0.2px;
}

@media (max-width: 560px) {
    .tp-note { padding: 12px 13px; gap: 9px; }
    .tp-note p { font-size: 12.5px; line-height: 1.7; }
}


/* A heading inside the announcement box. The box is a flex row of icon +
   text, so the heading has to be a block to claim its own line — inline it
   would run straight into the sentence that follows it. */
.sd-form__reach-head {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--p-amber);
}


/* ── Ticket Price Range introduction ──────────────────────────────────
   A standing note to the Promoter, above the whole feature. Three blocks
   now sit on this page and each has to be told apart at a glance:

     .tp-intro   neutral, informational — "here is how this works"
     .sd-banner  the live status readout — "here is what Members see now"
     .tp-note    amber caution on the campaign form — "this may change"

   So this one stays deliberately quiet: a plain card surface with a gold
   rail, no tint. Tinting it would make it compete with the status banner
   directly beneath it, which is the thing a Promoter actually came to read. */
.tp-intro {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 18px;
    background: var(--p-card);
    border: 1px solid var(--p-border);
    border-left: 3px solid var(--p-accent);
    border-radius: var(--p-radius-lg);
}

.tp-intro__mark {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--p-accent-dim);
    border: 1px solid rgba(255, 215, 0, 0.28);
    color: var(--p-accent);
    font-size: 17px;
}

.tp-intro__body { min-width: 0; }

.tp-intro__title {
    margin: 2px 0 7px;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--p-text);
    /* Keeps the headline from breaking to a single trailing word. */
    text-wrap: balance;
}

.tp-intro__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--p-text-soft);
    max-width: 88ch;
}

@media (max-width: 560px) {
    .tp-intro { gap: 12px; padding: 15px 16px; }
    /* The mark shrinks rather than dropping to its own row: at 34px it still
       reads as an icon, and a lone badge on a line of its own wastes the
       vertical space this block is already long in. */
    .tp-intro__mark { width: 34px; height: 34px; font-size: 14px; border-radius: 9px; }
    .tp-intro__title { font-size: 14.5px; }
    .tp-intro__text { font-size: 12.5px; line-height: 1.7; }
}


/* ── Show Date Range picker ───────────────────────────────────────────
   Two dates as one control, so a window reads as a window rather than as
   two unrelated fields that happen to sit together. Same shape as the
   .tp-range price picker, and deliberately so: a Promoter who has used
   one should recognise the other. */
.sd-range {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.sd-range__field {
    /* Equal halves however wide the card is. min-width:0 because a flex item
       defaults to min-content, and a date input's min-content is wide enough
       to push the pair past its container. */
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}
.sd-range__to {
    flex: 0 0 auto;
    /* Sits on the input's centre line, not the label's. */
    padding-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--p-text-soft);
}
.sd-range__hint { margin-top: 9px; }

/* The native calendar button is the whole point of the control, so it gets a
   real target rather than the browser's default sliver. panel.css already
   tints it gold; this only widens the hit area on the two range fields. */
.sd-range input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 4px;
    cursor: pointer;
}

@media (max-width: 560px) {
    /* Stacked below this: two date inputs and the word between them cannot
       share a row without each field dropping under ~120px, which is narrower
       than the dd/mm/yyyy text the browser puts in them. */
    .sd-range {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .sd-range__to {
        padding-bottom: 0;
        text-align: center;
    }
}