/* Feedback, feature board, my feedback, inbox and bug report. Fields, buttons and focus come from base.css. */
.feedback-page { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-8) var(--page-pad) 100px; }
.feedback-page h1 { font-family: var(--font-display); font-weight: var(--fw-heavy); font-size: var(--fs-40); line-height: var(--lh-tight); margin: var(--sp-2) 0 0; overflow-wrap: anywhere; }
.feedback-page h2 { font-size: var(--fs-24); }
.feedback-page h3 { font-size: var(--fs-18); }
.feedback-page p { line-height: var(--lh-body); }
.feedback-page header { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }
.feedback-page header > * { min-width: 0; }
.feedback-intro { max-width: 720px; color: var(--text2); }
.feedback-page summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; }

/* Chrome shared by every feedback page */
.feedback-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-1); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.fb-tabs { display: flex; gap: var(--sp-1); align-items: center; }
.feedback-nav .fb-tab { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--r-2); color: var(--text2); text-decoration: none; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.feedback-nav .fb-tab:hover { background: var(--panel2); }
.feedback-nav .fb-tab[aria-current=page] { background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line3); }

/* Surfaces */
.feedback-card, .feedback-detail { display: grid; gap: var(--sp-4); min-width: 0; padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); overflow-wrap: anywhere; }
.feedback-card h2, .feedback-card h3 { line-height: 1.3; }
.feedback-card > button { min-height: var(--tap); }
.feedback-detail > .badge { justify-self: start; }
.feedback-detail { position: sticky; top: var(--sp-4); }
.feedback-detail dl { display: grid; gap: var(--sp-2); }
.feedback-detail dt { font-weight: var(--fw-bold); }
.feedback-detail dd { margin: 0 0 var(--sp-4); white-space: pre-wrap; }
.feedback-list { display: grid; gap: var(--sp-4); align-content: start; }
.feedback-list[aria-busy=true] { opacity: .6; }
.feedback-empty { padding: var(--sp-7); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); text-align: center; color: var(--text2); }
.feedback-screenshot { display: block; max-width: 100%; max-height: 600px; object-fit: contain; }
.moderation-box { padding: var(--sp-4); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-2); }
.feedback-columns { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); }

/* Feature board */
.feature-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-5); }
.feature-content { display: grid; gap: var(--sp-3); }
.feature-description, .feedback-prose { white-space: pre-wrap; }
.feedback-meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; color: var(--muted); font-size: var(--fs-12); }
.badge { padding: var(--sp-1) var(--sp-2h); border: 1px solid var(--line); border-radius: var(--r-2); font-size: var(--fs-12); background: var(--panel2); color: var(--text); }
.vote-controls { display: flex; flex-direction: column; gap: var(--sp-2); align-items: stretch; align-self: start; justify-self: start; width: 56px; }
.vote-controls button { display: grid; place-items: center; min-height: var(--tap); padding: var(--sp-2); font-size: var(--fs-14); line-height: 1; color: var(--muted); }
.vote-controls button:hover:not(:disabled) { color: var(--text); }
.vote-controls [aria-pressed=true] { background: var(--panel3); border-color: var(--gold); color: var(--text); box-shadow: inset 0 0 0 1px var(--gold); }
.vote-score { text-align: center; font-family: var(--font-display); font-weight: var(--fw-heavy); font-size: var(--fs-24); line-height: 1; }
.feedback-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-bottom: var(--sp-2); }
.feedback-bar .feedback-filters { margin: 0; }
.feedback-bar .btn { margin-left: auto; }
#board-intro { margin: 0 0 var(--sp-2); color: var(--text2); }
#board-intro:empty { display: none; }

/* Forms */
.feedback-form { display: grid; gap: var(--sp-3); max-width: 760px; margin-top: var(--sp-6); }
.feedback-form label { margin-top: var(--sp-2); font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text); }
.feedback-form textarea { min-height: 100px; }
.feedback-form input[type=file] { max-width: 100%; padding: var(--sp-2) 0; border: 0; background: none; }
.feedback-form .check { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--tap); margin-top: 0; font-weight: var(--fw-regular); }
.feedback-form .check input { width: 24px; height: 24px; flex-shrink: 0; margin: 0; }
.feedback-form > button { justify-self: start; min-width: 200px; margin-top: var(--sp-2); }
.feedback-help { color: var(--muted); font-size: var(--fs-12); }
.feedback-fine summary { color: var(--muted); font-size: var(--fs-13); }
.feedback-fine p { margin: 0 0 var(--sp-2); }
.feedback-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.feedback-actions button, .feedback-actions a { min-height: var(--tap); }
input[type=file]::file-selector-button { min-height: var(--control-h); margin-right: var(--sp-3); padding: 0 var(--sp-3); border: 1px solid var(--line2); border-radius: var(--r-2); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-13); cursor: pointer; }

/* Choice and filters */
.feedback-choices { display: flex; gap: var(--sp-1); width: fit-content; max-width: 100%; padding: var(--sp-1); border: 1px solid var(--line2); border-radius: var(--r-2); background: var(--panel); }
.feedback-choices a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-5); border-radius: var(--r-2); color: var(--text2); text-decoration: none; font-weight: var(--fw-medium); }
.feedback-choices a[aria-current] { background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line3); }
.feedback-filters { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: end; margin-bottom: var(--sp-4); }
.feedback-filters label { display: grid; gap: var(--sp-2); font-size: var(--fs-13); color: var(--text2); }
.feedback-filters select { min-height: var(--tap); }

/* Inbox */
.inbox-item { gap: var(--sp-2); padding: var(--sp-4); cursor: default; }
.inbox-item.selected { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.inbox-title { min-height: var(--tap); text-align: left; font: var(--fw-heavy) var(--fs-18)/1.3 var(--font-display); color: var(--text); cursor: pointer; text-decoration: none; }
.inbox-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.pagination { display: flex; gap: var(--sp-4); margin-top: var(--sp-6); }

/* Status line: empty it takes no room, an error says so in danger red */
.error { color: var(--danger); }
#status { min-height: var(--sp-6); margin: var(--sp-3) 0; color: var(--muted); font-size: var(--fs-13); }
#status:empty { min-height: 0; margin: 0; }
#status.error { color: var(--danger); }

@media (min-width: 761px) { .feedback-detail { max-height: calc(100vh - var(--sp-7)); overflow: auto; } }
@media (max-width: 760px) {
  .feedback-columns { grid-template-columns: minmax(0, 1fr); }
  .feedback-page { padding: var(--sp-6) var(--sp-4) 100px; }
  .feedback-page h1 { font-size: var(--fs-32); }
  .feature-row { grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-3); }
  .feedback-card, .feedback-detail { padding: var(--sp-4); }
  .feedback-detail { position: static; }
  .feedback-nav { min-width: 0; max-width: 100%; }
  .fb-tabs { flex: 0 0 100%; flex-wrap:wrap; min-width: 0; max-width: 100%; }
  .fb-tabs::-webkit-scrollbar { display: none; }
  .fb-tab { flex: none; white-space: nowrap; }
  .feedback-nav .fb-tab { padding: 0 var(--sp-2); font-size:var(--fs-13); }
  .feedback-choices { width: 100%; }
  .feedback-choices a { flex: 1; justify-content: center; padding: 0 var(--sp-2); }
  .feedback-form > button, .feedback-bar .btn { width: 100%; }
  .feedback-filters { gap: var(--sp-3); }
  .feedback-filters label { flex: 1 1 140px; }
  .feedback-filters select { width: 100%; }
}

/* A report is a focused writing task, with optional context disclosed. */
.feedback-page { padding-bottom: 100px; }
.feedback-page header { gap: var(--sp-3); margin-bottom: var(--sp-4); }
.feedback-page h1 { font-size: var(--fs-32); }
.feedback-submit { position: sticky; bottom: 0; padding: var(--sp-3) 0 max(var(--sp-3),env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
.feedback-submit button { width: 100%; min-height: 48px; }
.feedback-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding-inline: 0; }
.feedback-admin-views { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); }
.feedback-admin-views button { min-height: 48px; border: 0; border-radius: 0; background: transparent; color: var(--muted); }
.feedback-admin-views [aria-selected=true] { box-shadow: inset 0 -3px var(--text); color: var(--text); }
.feedback-columns { display: block; }
.feedback-columns [role=tabpanel][hidden] { display: none; }
.feedback-detail { position: static; border: 0; border-radius: 0; padding: 0; background: transparent; }
@media(max-width:560px){.feedback-page h1{font-size:var(--fs-24)}.feedback-workspace{margin-top:var(--sp-4)}.feedback-workspace textarea{min-height:88px}.feedback-page .feedback-intro{font-size:var(--fs-14)}}

@media(max-width:560px){.feedback-page{padding-inline:var(--sp-4)}}