/* On top of ../v0.4/style.css: tabs, cards with an open rating form, the two outcome colours.
   Outcome pair on the dark surface (audit 2026-09-30): teal 6.2:1, pink 8.3:1, both AA and
   distinct from the magenta button. */
:root { --show: #25a9a7; --drop: #ff8fb3; }
[hidden] { display: none !important; }
main { max-width: 60rem; padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.top .who { color: var(--text-2); }
button.small { padding: 0.375rem 1rem; font-size: 0.9375rem; }
input[type="email"], input[type="url"], input[type="text"], input:not([type]) {
  font: inherit; color: var(--text); background: var(--ground); border: 1px solid #5a606d; border-radius: 10px; padding: 0.625rem 0.875rem; min-width: 0; width: 100%;
}
.row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.75rem; }
.row input { flex: 1 1 18rem; }
.login .help { margin-top: 0.75rem; }
.mail { margin: 1rem 0 0; padding: 0.75rem 1rem; border: 1px dashed var(--gold); border-radius: 10px; }

/* Toolbar: tabs left, filter and actions right; wraps on narrow screens. */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.tabs button { padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid #5a606d; background: transparent; color: var(--text-2); font-weight: 600; font-size: 0.9375rem; }
.tabs button:hover { border-color: var(--text); color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #111; }
.tabs .count { font-weight: 300; }
.tabs button[aria-selected="true"] .count { font-weight: 600; }
.tools { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.filter { display: flex; gap: 0.5rem; align-items: center; color: var(--text-2); font-size: 0.9375rem; min-width: 0; max-width: 100%; }
.filter select { flex: 1 1 auto; min-width: 0; }
.filter select, .suggest select, .form select { margin-top: 0; padding: 0.375rem 0.625rem; font-size: 0.9375rem; max-width: 100%; }
.toolbar, .tabs, .tools { min-width: 0; max-width: 100%; }
.rules ul { margin: 0; padding-left: 1.25rem; }
.rules li { margin-bottom: 0.5rem; }
.suggest form { display: grid; gap: 0.75rem; max-width: 36rem; }
.suggest label { display: grid; gap: 0.25rem; font-weight: 600; }
.suggest .row { margin-top: 0.25rem; }

.coverage { margin: 0 0 1rem; padding: 0.625rem 0.875rem; border-left: 3px solid var(--gold); color: var(--text-2); font-size: 0.9375rem; }
.coverage:empty { display: none; }
.message { padding: 0.625rem 0.875rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.message.error { color: var(--drop); border-color: var(--drop); }

/* Cards */
.items { list-style: none; margin: 0; padding: 0; }
.item { margin-bottom: 1rem; padding: clamp(1rem, 2.5vw, 1.5rem); }
.item.saved { border-color: var(--show); }
.badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem; }
.badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.8125rem; font-weight: 600; background: var(--line); color: var(--text-2); }
.badge.model { background: rgb(37 169 167 / 0.18); color: var(--show); }
.badge.new { background: var(--gold); color: #111; }
.badge.thin { background: rgb(194 165 107 / 0.18); color: var(--gold); }
.item .title { margin: 0 0 0.25rem; font-weight: 600; font-size: 1.1875rem; line-height: 1.35; }
.item .meta { margin: 0 0 0.5rem; color: var(--text-3); font-size: 0.9375rem; }
.outcome { margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--text-2); }
.outcome strong { font-weight: 600; }
.outcome.show strong { color: var(--show); }
.outcome.drop strong { color: var(--drop); }
.item details { margin: 0.25rem 0 0.5rem; }
.item summary { cursor: pointer; color: var(--text-3); font-size: 0.9375rem; }
.item summary:hover { color: var(--text); }
.reasons { margin: 0.5rem 0 0; padding-left: 1.125rem; color: var(--text-2); font-size: 0.9375rem; }
.reasons li { margin-bottom: 0.25rem; }
.reasons .who { color: var(--text-3); }

/* The rating form: flags and level as the survey's pill options, then note and the two buttons. */
.form { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); display: grid; gap: 0.75rem; }
.form .options { margin-top: 0.25rem; }
.form .group { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.form .label { color: var(--text-3); font-size: 0.9375rem; min-width: 5.5rem; }
.form .option span { padding: 0.5rem 0.875rem; font-size: 0.9375rem; }
.form .note { display: grid; gap: 0.25rem; }
.form .note input { max-width: 36rem; }
.verdict { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.verdict .why { flex-basis: 100%; margin: 0; color: var(--text-3); font-size: 0.9375rem; }
.verdict .primary:disabled { opacity: 0.4; cursor: not-allowed; }
.saved-line { margin: 0.5rem 0 0; color: var(--show); font-weight: 600; }

@media (max-width: 640px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .tools { justify-content: space-between; }
  .filter { flex-basis: 100%; }
  .verdict button { flex: 1 1 auto; }
}