/* feedback.css — the tester feedback surfaces (/feedback/new, /feedback,
   /feedback/{id} — FBN/FBM/FBD, WF-30/WF-31). Shared community primitives
   (Composer, tombstones, official tint, attachment strip) live in
   community.css — add ONLY feedback-surface styles here. Token-bound only. */

/* ============================================================================
   /feedback/new (FBN, WF-30)
   ========================================================================== */

.fbn__form {
    max-width: 44rem;
}

/* Product + Build side by side where there's room; stacked on narrow screens. */
.fbn__context {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

@media (max-width: 40rem) {
    .fbn__context {
        grid-template-columns: 1fr;
    }
}

.fbn__kinds {
    border: none;
    padding: 0;
    margin: 0;
}

.fbn__kinds legend {
    padding: 0;
    margin-block-end: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* Radio pills (WF-30): the input stays real and focusable — the label span is
   the visible pill, checked state encoded by fill + weight, not color alone. */
.fbn__pill input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.fbn__pill span {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-md);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-chip);
    background-color: var(--surface-raised);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    line-height: 1.5;
    cursor: pointer;
}

.fbn__pill input:checked + span {
    background-color: var(--accent-surface);
    border-color: var(--border-emphasis);
    color: var(--text-primary);
    font-weight: 600;
}

.fbn__pill input:focus-visible + span {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.fbn__share {
    padding: var(--space-md);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

/* ============================================================================
   /feedback — my reports (FBM, WF-31 ①) + the shared ReportRow anatomy
   ========================================================================== */

.fbm__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.fbm__empty {
    color: var(--text-secondary);
}

.fbm__pager {
    justify-content: flex-end;
}

.frow-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* The whole row is one anchor (§4.3a) — the card is the link. */
.frow__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-raised);
    color: var(--text-primary);
    text-decoration: none;
    min-width: 0;
}

.frow__link:hover {
    background-color: var(--surface-hover);
}

.frow__sig {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    white-space: nowrap;
}

.frow__title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.frow__meta {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* ============================================================================
   /feedback/{id} — detail (FBD, WF-31 ②)
   ========================================================================== */

.fbd {
    max-width: 48rem;
}

.fbd__meta {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.fbd__statusline {
    color: var(--text-primary);
}

.fbd__body {
    padding: var(--space-md);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

.fbd__own {
    gap: var(--space-md);
}

.fbd__own-link {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* The FRM-R11 inline delete confirm — one sentence, then the act. */
.fbd__confirm {
    padding: var(--space-md);
    background-color: var(--surface-raised);
    border-inline-start: 3px solid var(--status-danger-border);
    border-radius: var(--radius-container);
}

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

.fbd__reply {
    padding: var(--space-md);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-page);
}

/* FRM-R15: the official tint is the one mechanism — the accent-tinted raised
   fill on the cell (community.css .official supplies it); no extra border. */
.fbd__reply.official {
    border-color: var(--border-hairline);
}

.fbd__reply-head {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    margin-block-end: var(--space-xs);
}

.fbd__vis summary {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    cursor: pointer;
}

.fbd__vis-body {
    margin-block-start: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

/* ============================================================================
   SignalBar (SIG, §4.3a) — count pills + per-signal lines
   ========================================================================== */

.sig {
    padding: var(--space-md);
    border: 1px solid var(--border-emphasis);
    border-radius: var(--radius-container);
}

/* Submit-button pills (SSR zero-JS — a form submit, not the interactive Chip):
   pressed encodes beyond color via fill + weight + aria-pressed. */
.sig__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px var(--space-md);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-chip);
    background-color: var(--surface-raised);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    line-height: 1.5;
}

button.sig__pill {
    cursor: pointer;
}

button.sig__pill:hover {
    background-color: var(--surface-hover);
}

.sig__pill--pressed {
    background-color: var(--accent-surface);
    border-color: var(--border-emphasis);
    color: var(--text-primary);
    font-weight: 600;
}

.sig__retract {
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.sig__lines {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs, 0.25rem);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}