/* Bridge for page templates written before the design system (card, row, badge, ...).
   Maps the old class names onto the Neon workshop tokens. Delete a rule once no template
   uses its class; new templates use only the contract classes in app.css. */

.container { width: min(100%, var(--page-max)); margin-inline: auto; padding: var(--s-5) var(--gutter) var(--s-7); }
.container.narrow, .page.narrow { --page-max: 480px; }
.container.wide, .page.wide { --page-max: 1440px; }
main h1 + * { margin-top: var(--s-4); }

.card {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 3px;
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--line), var(--depth);
  padding: var(--s-5) var(--s-4); margin-bottom: var(--s-4); min-width: 0;
}
.card > h2:first-child, .card > .row:first-child h2 { margin-top: 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.spread { justify-content: space-between; }
.small { font-size: var(--fs-sm); }
.hero { padding: var(--s-4) 0 var(--s-5); }
.steps { padding-left: 1.2em; }
.steps li { margin-bottom: 6px; }
.table-wrap { overflow-x: auto; }
table:not(.table) { width: 100%; border-collapse: collapse; }
table:not(.table) th, table:not(.table) td { text-align: left; padding: 8px 6px;
  border-bottom: 1px solid var(--line); vertical-align: top; }
table:not(.table) th { font-size: var(--fs-sm); color: var(--text-3); font-weight: 600; }
@media (min-width: 720px) {
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}

/* bare submit buttons (old forms, allauth pages) read as the primary action */
:where(main button[type="submit"]:not([class])), .linklike {
  font: 600 .9rem/1.1 var(--font-display); font-stretch: 84%; letter-spacing: .07em;
  text-transform: uppercase; cursor: pointer;
}
:where(main button[type="submit"]:not([class])) {
  min-height: 44px; padding: 0 var(--s-4); color: var(--on-orange); background: var(--orange);
  border: 1px solid var(--orange); border-radius: 3px; box-shadow: var(--glow-orange);
}
:where(main button[type="submit"]:not([class])):hover { background: var(--orange-core); }
.linklike { background: none; border: 0; padding: 0; color: var(--text-2); }
.btn.secondary { --btn-fg: var(--text); --btn-bg: transparent; --btn-line: var(--line-3); }
.btn.secondary:hover { --btn-bg: var(--panel-2); --btn-line: var(--steel); }
.btn.small { min-height: 34px; padding: 0 10px; font-size: .8rem; }
.btn.danger { --btn-fg: var(--red-text); --btn-bg: transparent; --btn-line: rgb(var(--red-rgb) / .55); }
form p { margin: 0 0 14px; }
.errorlist { list-style: none; margin: 0 0 8px; padding: 10px 12px; border-radius: 3px;
  background: rgb(var(--red-rgb) / .1); border: 1px solid rgb(var(--red-rgb) / .45); color: var(--red-text); }
.field .errorlist { background: none; border: 0; padding: 0; }
.errorlist li + li { margin-top: 6px; }
input[type="checkbox"] + label { display: inline; font: inherit; text-transform: none; letter-spacing: 0;
  color: var(--text); margin-left: 6px; }
.choices > div, .choices ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.choices label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0; padding: 0 12px;
  font: 400 var(--fs-sm) var(--font-body); text-transform: none; letter-spacing: 0; color: var(--text);
  background: var(--well); border: 1px solid var(--line-2); border-radius: 3px; cursor: pointer;
}
.choices label:has(input:checked) { border-color: var(--line-3); background: var(--panel-3); }

.messages { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.messages li { padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 3px; margin-bottom: 8px; }

.badge {
  --st-rgb: var(--steel-rgb); --st-text: var(--text-2);
  display: inline-block; padding: 3px 8px 2px; border-radius: 2px; white-space: nowrap;
  font: 600 .72rem/1.35 var(--font-display); font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase;
  color: var(--st-text); background: rgb(var(--st-rgb) / .1); border: 1px solid rgb(var(--st-rgb) / .45);
}
.badge.needs_review, .badge.in_review, .badge.skipped, .badge.state-edited {
  --st-rgb: var(--orange-rgb); --st-text: var(--orange-core); }
.badge.approved, .badge.delivered, .badge.parsed, .badge.state-approved {
  --st-rgb: var(--green-rgb); --st-text: var(--green); }
.badge.failed, .badge.state-ai_failed { --st-rgb: var(--red-rgb); --st-text: var(--red-text); }
.error-text { color: var(--red-text); white-space: pre-line; }
.instructions { white-space: pre-line; }
.report h1 { font-size: var(--fs-lg); }
.report h2 { border-top: 1px solid var(--line); padding-top: var(--s-4); }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s-4); }
.tabs a { padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 3px; text-decoration: none;
  color: var(--text-2); font: 600 .78rem var(--font-display); font-stretch: 80%; letter-spacing: .09em;
  text-transform: uppercase; }
.tabs a.active { color: var(--text); background: var(--panel-3); border-color: var(--line-3); }
.list.queue > li { padding: var(--s-4); }
.sev { display: inline-block; padding: 1px 8px; border-radius: 2px; font: 600 .72rem/1.4 var(--font-display);
  font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-2); border: 1px solid var(--line-2); }
.sev.critical, .sev-critical { color: var(--red-text); border-color: rgb(var(--red-rgb) / .5);
  background: rgb(var(--red-rgb) / .1); }
.sev.warning, .sev-warning { color: var(--orange-core); border-color: rgb(var(--orange-rgb) / .5);
  background: rgb(var(--orange-rgb) / .1); }
.sev.info, .sev-info { color: var(--text-2); }
.sev-counts { gap: 6px; }
.sev-heading { margin: 16px 0 4px; font-size: 1rem; }
details[open] > summary { margin-bottom: 12px; }
.problem { border: 1px solid var(--line-2); border-radius: 3px; padding: 12px; margin: 0 0 var(--s-4); min-width: 0; }
.problem legend { font-weight: 700; padding: 0 6px; }
.problem .tools { justify-content: flex-end; margin-bottom: 8px; }
.cause { border: 1px solid var(--line); padding: 10px; margin-bottom: 10px; }
.cause > input, .cause > textarea { margin-bottom: 6px; }
.cause select { width: auto; flex: 1; }
.checks { display: grid; gap: 6px; }
label.check { font: 400 var(--fs-base) var(--font-body); text-transform: none; letter-spacing: 0;
  color: var(--text); margin: 0; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .btn { flex: 1 1 100%; }
@media (min-width: 720px) { .actions .btn { flex: 0 1 auto; } }
.preview-bar { margin-bottom: 12px; }
.preview { border: 1px dashed var(--line-2); border-radius: 3px; padding: 12px; margin-bottom: var(--s-4); }
.hints { background: rgb(var(--orange-rgb) / .07); border: 1px solid rgb(var(--orange-rgb) / .35);
  border-radius: 3px; padding: 10px 12px; margin-bottom: 12px; }
.card.notice { background: var(--panel); }
.comment { white-space: normal; color: var(--text); }
.file-list { text-align: left; margin: 10px 0 0; padding-left: 1.2em; }