.upcoming-intro { max-width: var(--site-width); padding-bottom: 38px; }
.upcoming-intro h1 { max-width: 850px; }
.upcoming-controls { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; background: var(--surface-glass); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; }
.upcoming-controls label { display: grid; gap: 9px; font-size: 13px; font-weight: 700; min-width: 0; }
.upcoming-controls input, .upcoming-controls select { width: 100%; min-height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--ink); background: white; font: inherit; font-size: 15px; }
.upcoming-board button { font: inherit; cursor: pointer; }
.upcoming-board button:disabled { cursor: wait; opacity: .55; }
.upcoming-board :is(button, input, select):focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.upcoming-feedback { display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; align-items: center; min-height: 66px; padding: 15px 0; font-size: 13px; color: var(--ink-mute); }
.upcoming-feedback button, #feature-reset, #votes-clear { background: none; border: 0; padding: 5px; color: var(--blue-deep); text-decoration: underline; }
.upcoming-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; }
.upcoming-card { display: flex; flex-direction: column; gap: 18px; padding: 25px; background: var(--surface-glass); border: 2px solid var(--status-colour); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
[data-feature-status="Planned"], [data-status-filter="Planned"], [data-state="Planned"] { --status-colour: #5674b9; --status-tint: #e8edfa; --status-ink: #445b80; }
[data-feature-status="In progress"], [data-status-filter="In progress"], [data-state="In progress"] { --status-colour: #7955d2; --status-tint: #e8e4ff; --status-ink: #5140a3; }
[data-feature-status="In testing"], [data-status-filter="In testing"], [data-state="In testing"] { --status-colour: #bf8b2c; --status-tint: #fff1d5; --status-ink: #795313; }
[data-feature-status="Completed"], [data-status-filter="Completed"], [data-state="Completed"] { --status-colour: #409263; --status-tint: #dff3e7; --status-ink: #286441; }
.upcoming-card-title { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.upcoming-card-title h3 { flex: 1; min-width: 0; }
.upcoming-card-meta { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; align-content: center; min-width: 0; font-size: 11px; font-weight: 650; }
.upcoming-card-voting { display: grid; justify-items: end; gap: 6px; flex-shrink: 0; }
.upcoming-category { color: var(--ink-mute); }
.upcoming-state { background: var(--status-tint); color: var(--status-ink); padding: 5px 8px; border-radius: var(--pill); }
.upcoming-card h3 { font-size: 23px; line-height: 1.2; }
.upcoming-description { color: var(--ink-mute); font-size: 15px; line-height: 1.7; flex: 1; }
.upcoming-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.upcoming-count { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.upcoming-vote-context { color: var(--ink-mute); font-size: 12px; }
.upcoming-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.upcoming-vote { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; min-width: 84px; border: 1.5px solid #a7beee; border-radius: 14px; background: #eef4ff; color: var(--blue-deep); padding: 10px 15px; font-weight: 700 !important; transition: background .15s, box-shadow .15s; }
.upcoming-vote svg { flex-shrink: 0; }
.upcoming-vote[aria-pressed="true"] { background: var(--blue-deep); border-color: var(--blue-deep); color: white; }
.upcoming-vote:hover:not(:disabled) { box-shadow: var(--shadow-sm); }
.upcoming-empty { text-align: center; padding: 55px 24px; background: var(--surface-glass); border-radius: var(--radius-lg); }
.upcoming-empty p { margin: 15px 0; color: var(--ink-mute); }
.upcoming-voting-privacy, .upcoming-notice { font-size: 14px; line-height: 1.8; color: var(--ink-mute); }
.upcoming-voting-privacy { margin-top: 32px; }
.upcoming-board [hidden] { display: none !important; }
@media (max-width: 960px) { .upcoming-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .upcoming-grid, .upcoming-controls { grid-template-columns: 1fr; }
  .upcoming-card { padding: 22px; }
  .upcoming-feedback { align-items: start; flex-direction: column; }
}
.upcoming-status-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.upcoming-status-filters button { border: 2px solid var(--status-colour, var(--ink)); background: var(--surface-glass); color: var(--ink); border-radius: var(--pill); min-height: 44px; padding: 10px 15px; font-size: 14px; font-weight: 650; }
.upcoming-status-filters button[aria-pressed="true"] { background: var(--status-tint, var(--ink)); color: var(--status-ink, white); box-shadow: inset 0 0 0 1px var(--status-colour, var(--ink)); }
.upcoming-status-filters span { margin-left: 5px; opacity: .7; }
.upcoming-status-help { font-size: 14px; line-height: 1.8; color: var(--ink-mute); margin: 18px 0 26px; max-width: 800px; }
.upcoming-completed { color: #286441; font-size: 14px; font-weight: 700; }
.upcoming-card-bottom a { font-size: 13px; }
.upcoming-card-bottom { flex-wrap: wrap; }
.upcoming-suggest-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; }
#suggest { scroll-margin-top: 90px; }
.upcoming-suggest-layout h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 24px; }
.upcoming-suggest-layout .lede { font-size: 18px; }
.upcoming-form { display: flex; flex-direction: column; gap: 12px; padding: 32px; background: var(--surface-glass); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.upcoming-form label { font-size: 14px; font-weight: 700; margin-top: 10px; }
.upcoming-form h3 { font-size: 24px; line-height: 1.25; color: var(--blue-deep); }
.upcoming-form-accent { color: var(--blue-deep); }
.upcoming-form label:first-child { margin-top: 0; }
.upcoming-form label span { font-weight: 400; color: var(--ink-mute); }
.upcoming-form input, .upcoming-form textarea { width: 100%; min-height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: white; color: var(--ink); padding: 12px; font: inherit; font-size: 16px; }
.upcoming-form textarea { resize: vertical; min-height: 140px; }
.upcoming-form p { font-size: 13px; line-height: 1.7; color: var(--ink-mute); overflow-wrap: anywhere; }
.upcoming-form input[type="file"] { padding: 10px; font-size: 13px; }
.upcoming-form input::file-selector-button { border: 0; background: #edf3ff; color: var(--blue-deep); border-radius: 6px; padding: 8px; margin-right: 8px; font: inherit; }
.upcoming-form .button { margin-top: 12px; border: 0; }
.upcoming-form :is(input, textarea):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.upcoming-form .upcoming-honeypot { display: none; }
@media (max-width: 800px) {
  .upcoming-suggest-layout { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 620px) {
  .upcoming-form { padding: 22px; }
  .upcoming-status-filters { gap: 8px; }
  .upcoming-status-filters button { padding: 10px 12px; }
}