@charset "UTF-8";
/* ──────────────────────────────────────────────────────────────────────────────
   /rally-feedback — the post-rally feedback form.

   Loads alongside rally.css, which supplies the palette, type stack, masthead,
   .section, .btn, .alert and .err-msg. Every class here is prefixed fb- and none
   reuses a name rally.css defines.

   The option cards are the entry form's .bed-opt pattern rebuilt rather than
   shared — .bed-opt carries entry-form spacing and a two-column grid this form
   doesn't want, which is the same call the portal poll made with .pv-choice.
   ────────────────────────────────────────────────────────────────────────────── */

/* No sticky total bar on this page, so give back the room rally.css reserves. */
body.fb { padding-bottom: 2rem; }

.fb-intro {
    margin: 2rem 0 0;
    color: var(--muted);
}
.fb-intro p { margin: 0 0 .4rem; }

.fb-closes {
    color: var(--gold);
    font-size: .88rem;
}

/* ─── One question ────────────────────────────────────────────────────────── */

.fb-q {
    margin: 0 0 .9rem;
    padding: 1.05rem 1.1rem 1.15rem;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    scroll-margin-top: 1.5rem;
}

.has-hero-bg .fb-q { background-color: rgba(26,27,30,.86); }

.fb-q.is-error { border-color: var(--error); }

/* A legend can't be laid out reliably as a block with margins, so float it out
   of the fieldset border and give it a width — the documented way to make it
   behave like an ordinary heading. */
.fb-label {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 .75rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1.06rem;
    line-height: 1.35;
    letter-spacing: .01em;
    color: var(--text);
}
.fb-label + * { clear: both; }

.fb-hint {
    clear: both;
    margin: -.45rem 0 .75rem;
    color: var(--muted-dim);
    font-size: .85rem;
}

.fb-sublabel {
    display: block;
    margin: 0 0 .35rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.fb-note {
    margin: .8rem 0 0;
    padding-left: .75rem;
    border-left: 2px solid var(--gold);
    color: var(--muted);
    font-size: .87rem;
}

.fb-car { margin-top: .9rem; max-width: 9rem; }

.fb-follow { margin-top: .9rem; }
.fb-follow.is-error textarea { border-color: var(--error); }

/* ─── Choice cards ────────────────────────────────────────────────────────── */

.fb-opts {
    display: grid;
    gap: .5rem;
}

/* Yes / No fit side by side at any width; longer labels stack on a phone. */
.fb-opts-yesno { grid-template-columns: 1fr 1fr; }

@media (min-width: 30rem) {
    .fb-opts-2 { grid-template-columns: 1fr 1fr; }
    .fb-opts-3 { grid-template-columns: repeat(3, 1fr); }
}

.fb-opt { position: relative; display: block; }
.fb-opt input { position: absolute; opacity: 0; pointer-events: none; }

.fb-opt span {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 100%;
    padding: .75rem .9rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .93rem;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

/* The radio dot, drawn so the card still reads as "pick one" before anything
   is selected. */
.fb-opt span::before {
    content: '';
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--border-hi);
    box-sizing: border-box;
}

.fb-opt:hover span { border-color: var(--border-hi); }

.fb-opt input:checked + span {
    border-color: var(--action-edge);
    background: rgba(165, 56, 42, .13);
}
.fb-opt input:checked + span::before {
    border-color: var(--action-edge);
    background: radial-gradient(circle, var(--action-edge) 0 42%, transparent 46%);
}

.fb-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ─── 1–10 scale ──────────────────────────────────────────────────────────── */

/* Ten across down to phone width: a scale broken onto two rows stops reading as
   a line from low to high. Each cell is still ~30px wide and 44px tall at 400px. */
.fb-scale {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: .3rem;
}

.fb-score { position: relative; display: block; }
.fb-score input { position: absolute; opacity: 0; pointer-events: none; }

.fb-score span {
    display: grid;
    place-items: center;
    min-height: 2.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.fb-score:hover span { border-color: var(--border-hi); }

.fb-score input:checked + span {
    border-color: var(--action-edge);
    background: var(--action);
    color: var(--action-ink);
}

.fb-score input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.fb-anchors {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .45rem;
    color: var(--muted-dim);
    font-size: .78rem;
    line-height: 1.3;
}
.fb-anchors span:last-child { text-align: right; }

/* ─── Submit ──────────────────────────────────────────────────────────────── */

.fb-submit { margin: 1.5rem 0 1rem; }
.fb-submit .btn { width: 100%; }

@media (min-width: 34rem) {
    .fb-submit { display: flex; justify-content: flex-end; }
    .fb-submit .btn { width: auto; min-width: 16rem; }
}

/* ─── Honeypot ────────────────────────────────────────────────────────────── */

.fb-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

[hidden] { display: none !important; }