:root { --ivory:#f5f7fa; --ink:#142139; --navy:#14283f; --muted:#52647d; --paper:#fff; }
.feedback-page { max-width: 1240px; margin: 0 auto; padding: 0 40px 90px; }
.preview-notice { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 15px; border: 1px solid #e1d4b9; border-radius: 10px; color: #65553b; background: #f8f2e5; font-size: .75rem; line-height: 1.5; }
.feedback-intro { margin: 38px 0 60px; background: #e7eefb; border-radius: 24px; padding: 56px 65px; display: grid; grid-template-columns: 1fr 270px; align-items: center; overflow: hidden; }
.intro-kicker { color: #5e6f79; font-size: .85rem; font-weight: 600; margin: 0 0 16px; }
.sparkle { color: #b18c4c; margin-right: 5px; font-size: 1.2rem; }
.feedback-intro h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); max-width: 13ch; margin-bottom: 20px; }
.feedback-intro p:not(.intro-kicker) { color: #596b78; max-width: 47ch; font-size: 1rem; line-height: 1.65; margin-bottom: 26px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #2463d4; outline-offset: 3px; }
.primary-action { border: 0; border-radius: 12px; background: var(--ink); color: #fff; padding: 13px 20px; font-size: .86rem; font-weight: 600; }
.primary-action:hover { background: #141f32; }
.primary-action span { font-size: 1.15rem; margin-right: 4px; }
.intro-art { width: 230px; justify-self: center; }
.intro-art img { width: 100%; height: auto; }
.board-top { display: flex; justify-content: space-between; gap: 24px; align-items: end; border-bottom: 1px solid #d8ddda; }
.board-tabs { display: flex; gap: 30px; }.board-tabs button { background: none; color: #596b66; border: 0; border-bottom: 3px solid transparent; padding: 0 0 16px; font-weight: 600; font-size: .9rem; }.board-tabs button[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.board-tools { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.search-box { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #faf9f6; border: 1px solid #d8ddda; border-radius: 10px; }.search-box svg { width: 18px; height: 18px; fill: none; stroke: #758087; stroke-width: 1.7; }.search-box input { width: 150px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .82rem; }.search-box:focus-within { outline: 3px solid #2463d4; outline-offset: 2px; }
.select-label { position: relative; display: block; }
.select-label::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select-label select { appearance: none; -webkit-appearance: none; border: 1px solid #d8ddda; border-radius: 10px; background: #faf9f6; padding: 9px 38px 9px 12px; color: var(--ink); font-size: .82rem; min-height: 44px; cursor: pointer; }
.section-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 35px 0 20px; }.section-intro h2 { font-size: 1.5rem; margin: 0 0 6px; }.section-intro p { margin: 0; color: var(--muted); font-size: .86rem; }.sample-label { color: #596b66; font-size: .75rem; white-space: nowrap; }
.idea-list { display: grid; gap: 10px; }.idea-card { display: flex; gap: 20px; align-items: flex-start; background: #faf9f6; border: 1px solid #e0e3df; border-radius: 15px; padding: 20px; }.vote-button { flex: 0 0 58px; min-height: 62px; border: 1px solid #d9dfdc; border-radius: 10px; background: #fff; color: var(--ink); font-size: .84rem; font-weight: 600; line-height: 1.3; }.vote-button span { display: block; font-size: 1.05rem; }.vote-button[aria-pressed="true"] { background: #e8eee9; border-color: #93aa9d; }.idea-body { min-width: 0; }.status-pill { display: inline-block; padding: 3px 9px; border-radius: 99px; background: #e7edeb; color: #4f6d63; font-size: .68rem; font-weight: 600; line-height: 1.5; }.status-planned { background: #e8eaf3; color: #596b95; }.status-completed { background: #e7eee2; color: #4d6d4c; }.status-wont-do { background: #f2eae3; color: #8a6854; }.idea-title { margin: 8px 0 5px; font-size: 1.07rem; letter-spacing: -.025em; }.idea-description { margin: 0; font-size: .86rem; line-height: 1.55; color: #66737a; }.idea-meta { margin: 8px 0 0; color: #596b66; font-size: .72rem; }
.roadmap-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.roadmap-column { background: #e9ece8; padding: 16px; border-radius: 15px; min-width: 0; }.roadmap-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .82rem; margin: 0 0 16px; letter-spacing: 0; }.roadmap-heading span { color: #596b66; font-weight: 400; }.roadmap-list { display: grid; gap: 9px; }.roadmap-card { background: #faf9f6; border: 1px solid #e0e3df; border-radius: 11px; padding: 15px; }.roadmap-card h3 { font-size: .92rem; line-height: 1.3; margin: 0 0 8px; }.roadmap-card p { margin: 0; color: #596b66; font-size: .73rem; line-height: 1.5; }.roadmap-card .roadmap-votes { display: block; margin-top: 12px; color: #586d68; font-size: .72rem; font-weight: 600; }.empty-state { padding: 32px 20px; border: 1px dashed #cbd4d0; border-radius: 12px; color: #66737a; font-size: .86rem; }
.feedback-note { display: flex; align-items: center; gap: 20px; margin-top: 55px; padding: 28px 30px; border-top: 1px solid #d8ddda; }.note-icon { flex: 0 0 46px; height: 46px; border-radius: 50%; background: #efe2c9; color: #a48044; display: grid; place-items: center; font-size: 1.3rem; }.feedback-note h2 { font-size: 1.1rem; margin: 0 0 5px; }.feedback-note p { color: var(--muted); font-size: .8rem; margin: 0; }.text-action { margin-left: auto; white-space: nowrap; background: none; border: 0; color: var(--ink); font-size: .83rem; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
[hidden] { display: none !important; }
#request-dialog { width: min(600px, calc(100% - 32px)); max-height: min(90vh, 850px); border: 0; padding: 0; border-radius: 20px; color: var(--ink); background: #faf9f6; box-shadow: 0 25px 80px #141f3240; } #request-dialog::backdrop { background: #141f32a8; }.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 28px 32px; border-bottom: 1px solid #e3e5e0; }.dialog-header p { color: #596b66; font-size: .77rem; margin: 0 0 3px; }.dialog-header h2 { font-size: 1.8rem; margin: 0; }.close-dialog { font-size: 1.8rem; line-height: 1; border: 0; background: none; color: var(--ink); }.dialog-body { padding: 28px 32px 32px; }.dialog-intro { font-size: .85rem; color: #66737a; }.conversation-prompt { width: fit-content; max-width: 90%; background: #e8edeb; border-radius: 16px 16px 16px 4px; padding: 14px 17px; margin: 24px 0; font-size: .9rem; }.dialog-body label { display: block; font-size: .8rem; font-weight: 600; margin: 16px 0 6px; }.dialog-body label span { color: #596b66; font-weight: 400; }.dialog-body input, .dialog-body textarea { width: 100%; border: 1px solid #cfd8d4; border-radius: 10px; padding: 12px; background: #fff; color: var(--ink); font-size: .9rem; }.dialog-body textarea { resize: vertical; }.dialog-body #request-next { margin-top: 18px; }.form-hint { font-size: .73rem; color: #596b66; margin: 10px 0 20px; }.form-actions { display: flex; justify-content: space-between; gap: 12px; }.secondary-action { border: 1px solid #cbd4d0; border-radius: 10px; background: transparent; color: var(--ink); padding: 10px 18px; font-size: .85rem; }
@media (max-width: 850px) { .roadmap-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }.feedback-intro { padding: 45px; grid-template-columns: 1fr 190px; }.intro-art { transform: scale(.8); } }
@media (max-width: 620px) { .feedback-page { padding: 0 20px 50px; }.preview-notice { gap: 2px 7px; }.feedback-intro { margin: 25px 0 40px; padding: 30px 25px; display: block; }.feedback-intro h1 { font-size: 2.6rem; }.intro-art { display: block; width: 160px; margin: 22px auto 0; }.board-top { display: block; }.board-tabs { gap: 24px; }.board-tools { padding-top: 16px; }.search-box { flex: 1; min-width: 0; }.search-box input { width: 100%; }.section-intro { align-items: flex-start; }.sample-label { display: none; }.idea-card { gap: 13px; padding: 15px; }.vote-button { flex-basis: 50px; }.roadmap-columns { grid-template-columns: 1fr; }.roadmap-column { min-height: auto; }.feedback-note { align-items: flex-start; padding: 25px 0; flex-wrap: wrap; }.feedback-note > div:nth-child(2) { flex: 1; }.text-action { margin-left: 66px; }.dialog-header, .dialog-body { padding-left: 22px; padding-right: 22px; } }
.roadmap-heading { display: block; }.roadmap-heading-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.roadmap-heading h3 { margin: 0; font-size: .83rem; letter-spacing: -.01em; }.roadmap-heading p { color: #596b66; font-size: .85rem; margin: 5px 0 0; }.roadmap-card.idea-card { gap: 10px; padding: 13px; }.roadmap-card .vote-button { flex-basis: 44px; min-height: 50px; font-size: .72rem; }.roadmap-card .vote-button span { font-size: .8rem; }.roadmap-card .idea-title { margin: 0 0 7px; }.roadmap-card .idea-description { font-size: .88rem; }.roadmap-empty, .feedback-empty { color: #596b66; font-size: .78rem; }
.status-declined { background: #f2eae3; color: #8a6854; }
.board-message { color: var(--muted); font-size: .85rem; margin: 22px 0 0; }
.board-message.error, .form-error { color: #a43939; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.vote-button:disabled, .primary-action:disabled { cursor: wait; opacity: .6; }
.form-error { font-size: .8rem; margin: 0 0 16px; }

/* Immediate feedback for custom controls, including touch and keyboard presses. */
.primary-action:active:not(:disabled) { background: #101a2b; box-shadow: inset 0 2px 5px #0003; }
.vote-button:active:not(:disabled), .secondary-action:active,
.text-action:active, .close-dialog:active, .board-tabs button:active { background: #dce5e0; }
.close-dialog { flex: 0 0 auto; display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 10px; }
.board-tabs button, .text-action, .select-label select, .search-box { min-height: 44px; }
.board-tabs { flex-wrap: wrap; }
.board-top, .board-tools { flex-wrap: wrap; }
.idea-title, .idea-description { overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .board-tools .search-box { flex: 1 0 100%; }
  .board-tools .select-label { flex: 1 1 auto; min-width: 0; }
  .board-tools .select-label select { width: 100%; }
}