:root {
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #fafaf8;
  --ink: #1d1d1b;
  --muted: #66655f;
  --rule: #e2e1dc;
  --field: #fff;
  --field-border: #b5b3ab;
  --accent: #23527c;
  --accent-dark: #173a59;
  --focus: #1f5fa8;
  --accept: #1c5429;
  --accept-bg: #d8f0de;
  --maybe: #6e4300;
  --maybe-bg: #fcecc9;
  --reject: #862c25;
  --reject-bg: #f5dfdc;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.5 var(--sans);
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.skip { position: absolute; left: -999rem; top: 0.5rem; padding: 0.4rem 0.8rem; background: var(--ink); color: var(--bg); }
.skip:focus { left: 0.5rem; }

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--rule); background: #fff;
}
.bar .name { color: var(--ink); font-weight: 600; text-decoration: none; }
.logout { display: flex; gap: 0.75rem; align-items: center; color: var(--muted); margin: 0; }

main { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.25rem; overflow-wrap: anywhere; }
h2 { font-size: 1rem; margin: 1rem 0 0.4rem; }
small, .muted { color: var(--muted); }

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { padding: 0.5rem 0.75rem; border-left: 4px solid var(--accent); background: #fff; margin-bottom: 0.4rem; }
.messages .error { border-color: var(--reject); }
.messages .success { border-color: var(--accept); }
.error { color: var(--reject); margin: 0.2rem 0; }

.field { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.75rem; min-width: 0; }
.field label { font-weight: 600; font-size: 0.9rem; }
input[type=text], input[type=url], input[type=email], input[type=number], input[type=password], select, textarea {
  width: 100%; max-width: 32rem; padding: 0.4rem 0.5rem; font: inherit;
  border: 1px solid var(--field-border); border-radius: 3px; background: var(--field); color: var(--ink);
}
.has-error input, .has-error select { border-color: var(--reject); }

.button {
  display: inline-block; padding: 0.45rem 0.9rem; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); color: #fff;
}
.button:hover { background: var(--accent-dark); }
.button.secondary { background: #fff; color: var(--accent); }
.button.danger { background: var(--reject); border-color: var(--reject); }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.link-button { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }

.login { max-width: 22rem; margin: 4rem auto; }

.new { display: grid; grid-template-columns: 2fr 1.5fr 0.8fr auto; gap: 0 1rem; align-items: start;
  padding: 1rem; margin-bottom: 1.25rem; background: #fff; border: 1px solid var(--rule); }
.new p { margin: 1.55rem 0 0; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.filters select { width: auto; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--rule); }
.list th { font-size: 0.85rem; color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.verdict { display: inline-block; padding: 0 0.5rem; border-radius: 3px; font-weight: 600; }
.verdict-accept { background: var(--accept-bg); color: var(--accept); }
.verdict-maybe { background: var(--maybe-bg); color: var(--maybe); }
.verdict-reject { background: var(--reject-bg); color: var(--reject); }
.verdict-unknown { background: var(--rule); color: var(--ink); }
.verdict.big { font-size: 1.4rem; padding: 0.1rem 0.75rem; margin: 0; }

.card-head p { margin: 0 0 1rem; color: var(--muted); overflow-wrap: anywhere; }
.status { padding: 0.5rem 0.75rem; background: var(--maybe-bg); }
.status p { margin: 0 0 0.5rem; }
.status ul { margin: 0; padding-left: 1.2rem; }
.status form { margin: 0; }
.status.manual, .status.blocked { background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--accent); margin-bottom: 1.25rem; }
.summary { display: grid; grid-template-columns: 11rem 1fr 16rem; gap: 1.5rem; padding: 1rem;
  background: #fff; border: 1px solid var(--rule); margin-bottom: 1.25rem; }
.summary ul { margin: 0; padding-left: 1.2rem; }
.score { font-size: 1.6rem; font-weight: 600; margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; }
.score span { font-size: 1rem; color: var(--muted); font-weight: 400; }
.breakdown td { padding: 0.2rem 0.25rem; }
.crm-box { overflow-wrap: anywhere; }

.shot { margin: 0 0 1.25rem; }
.shot img { display: block; max-width: 100%; height: auto; max-height: 38rem; object-fit: cover; object-position: top;
  border: 1px solid var(--rule); }
.shot figcaption { margin-top: 0.3rem; }

.edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
fieldset { border: 1px solid var(--rule); background: #fff; padding: 0.75rem 1rem; margin: 0; min-width: 0; }
legend { font-weight: 600; padding: 0 0.25rem; }
.actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
.reject { display: flex; gap: 0.5rem; align-items: end; }
.reject .field { margin: 0; }

.found { margin-top: 2rem; }
.found th { width: 10rem; font-size: 0.9rem; }
.found td { overflow-wrap: anywhere; }

@media (max-width: 48rem) {
  .new, .summary { grid-template-columns: 1fr; }
  .new p { margin: 0; }
  .reject { flex-wrap: wrap; }
  .found th { width: 6.5rem; }
}