/* Feedback modal (KL-139, extracted to features/). Real overlay,
   scrollable when content overflows the viewport so tall forms don't
   clip on small windows. */
@layer features {

/* Feedback modal: a real overlay, scrollable when content overflows
   the viewport so tall forms don't clip on small windows. */
.feedback-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.feedback-overlay[hidden] { display: none; }
.feedback-dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 1.4rem 1.6rem;
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.feedback-dialog h2 {
    margin: 0 0 0.4rem;
    color: var(--accent);
    font-size: 1.2rem;
}
.feedback-dialog .lead {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}
.feedback-dialog .fb-known-issues-link {
    margin: -0.5rem 0 1rem;
    font-size: 0.82rem;
    color: var(--text-dim);
}
.feedback-dialog .fb-known-issues-link a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--accent);
}
.feedback-dialog .fb-known-issues-link a:hover { filter: brightness(1.15); }
.feedback-dialog label.field {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 0.8rem;
    color: var(--text-dim);
}
.feedback-dialog .field-label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
}
.feedback-dialog input[type="text"],
.feedback-dialog input[type="email"],
.feedback-dialog textarea,
.feedback-dialog select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 0.35rem;
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.feedback-dialog textarea { resize: vertical; min-height: 4rem; }
.feedback-dialog input[disabled] { opacity: 0.5; cursor: not-allowed; }
.feedback-dialog .optional { font-weight: 400; color: var(--text-dim); }

.feedback-dialog .fb-radio-group {
    border: 0;
    padding: 0;
    margin: 0 0 0.9rem;
}
.feedback-dialog .fb-radio-group legend { padding: 0; }
.feedback-dialog .fb-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.9rem;
    margin-top: 0.3rem;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
}
.feedback-dialog .fb-radio-group input[type="radio"] { accent-color: var(--accent); }

/* Bug-only fields toggle visibility based on form.is-bug class. */
.feedback-dialog form:not(.is-bug) .fb-bug-only { display: none; }
.feedback-dialog form.is-bug .fb-freeform { display: none; }

/* Post-submit collapse: hide every form child except the success banner
   and the actions row. Leaves a clean confirmation surface — success
   message + Close button — so the user knows the work is done and can't
   accidentally re-submit. */
.feedback-dialog form.is-success > *:not(.fb-result):not(.fb-actions) {
    display: none;
}

.feedback-dialog .credit-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.6rem;
}
.feedback-dialog .credit-row input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent);
}
.feedback-dialog .credit-row label {
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
}
.feedback-dialog .credit-name {
    margin-top: 0.4rem;
    margin-left: 1.65rem;
}
.feedback-dialog .fb-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 1rem;
}
.feedback-dialog .btn-primary,
.feedback-dialog .btn-secondary {
    border-radius: 0.4rem;
    padding: 0.6rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.feedback-dialog .btn-primary {
    background: var(--accent);
    color: #14111c;
    border: 0;
}
.feedback-dialog .btn-primary:hover { filter: brightness(1.1); }
.feedback-dialog .btn-primary[disabled] { opacity: 0.6; cursor: progress; }
.feedback-dialog .btn-secondary {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.feedback-dialog .btn-secondary:hover { color: var(--text); }
.feedback-dialog .footnote {
    margin-top: 0.8rem;
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.4;
}
.feedback-dialog .fb-result {
    margin: 0.6rem 0 0;
    padding: 0.55rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    line-height: 1.4;
}
.feedback-dialog .fb-result.ok {
    background: rgba(80, 200, 130, 0.12);
    border: 1px solid rgba(80, 200, 130, 0.4);
    color: #aef0ce;
}
.feedback-dialog .fb-result.err {
    background: rgba(220, 80, 80, 0.12);
    border: 1px solid rgba(220, 80, 80, 0.4);
    color: #f5a8a8;
}
.feedback-dialog .fb-result a { color: inherit; }


} /* end @layer features */
