/* Страница гостя «совета друзей» (docs/DESIGN_SYSTEM.md): чёрное на белом, обводки 2 px без
   теней, цвет — только острова кандидатов и оценки, капсулы. Шрифт — Golos Text, если он есть
   в системе, иначе системный: внешних загрузок у страницы нет. */
:root {
  --primary: #000000;
  --on-primary: #e2e2e2;
  --surface: #f9f9f9;
  --on-surface: #1b1b1b;
  --sheet: #ffffff;
  --muted: #474747;
  --outline: #777777;
  --hairline: #c6c6c6;
  --error: #ba1a1a;
  --flag-red: #d32419;
  --marker: #fadf0e;
  --focus: #000000;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #ffffff;
    --on-primary: #1b1b1b;
    --surface: #131313;
    --on-surface: #e2e2e2;
    --sheet: #0e0e0e;
    --muted: #c6c6c6;
    --outline: #919191;
    --hairline: #474747;
    --error: #ffb4ab;
    --flag-red: #ff6b61;
    --focus: #ffffff;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font: 400 16px/22px "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.page { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }
.brand { margin: 0 0 8px; font-weight: 800; }
h1 { margin: 0 0 8px; font-weight: 800; font-size: 28px; line-height: 30px; }
h2 { margin: 32px 0 16px; font-weight: 800; font-size: 20px; line-height: 24px; }
p { margin: 0 0 16px; }
.lead, .small, .note { color: var(--muted); }
.small { font-size: 12px; line-height: 16px; font-weight: 600; }
.flash {
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: 12px 16px;
  background: var(--sheet);
  font-weight: 600;
}
.flash mark { background: var(--marker); color: #000; border-radius: 2px; padding: 0 4px; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.scroll {
  overflow-x: auto;
  border: 2px solid var(--primary);
  border-radius: 20px;
  background: var(--sheet);
}
table { border-collapse: collapse; width: 100%; min-width: 360px; }
th, td { padding: 8px; text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--primary); }
tbody tr + tr th, tbody tr + tr td { border-top: 1px solid var(--hairline); }
tbody th { font-weight: 600; font-size: 14px; line-height: 18px; min-width: 128px; }
.weight { display: block; color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.stop { display: inline-block; margin-top: 2px; color: var(--flag-red); font-size: 12px; font-weight: 800; }
.island {
  display: flex; align-items: center; gap: 8px; min-width: 132px;
  padding: 8px 12px; border-radius: 20px; color: #000; font-weight: 800;
}
.island img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; }
.island small { display: block; font-weight: 600; font-size: 12px; }
.c0 { background: #a0e9ff; } .c1 { background: #ffa0f0; } .c2 { background: #d2c2ff; }
.c3 { background: #ffc59e; } .c4 { background: #a9bcff; } .c5 { background: #e6d9c2; }
.cell { display: block; min-height: 32px; padding: 6px 8px; border-radius: 8px; color: #000; font-weight: 600; font-size: 14px; line-height: 18px; }
.cell b { display: block; font-weight: 800; }
.r1 { background: #ff8f85; } .r2 { background: #ffd0ca; } .r3 { background: #e4e4e4; }
.r4 { background: #c9f2c2; } .r5 { background: #74dd86; }
.unknown { border: 2px dashed var(--outline); color: var(--on-surface); }
.empty { color: var(--muted); }
.score td { font-weight: 800; font-size: 20px; line-height: 24px; }
.legend { margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
form { display: grid; gap: 12px; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
legend, label { font-weight: 800; }
legend { margin-bottom: 8px; }
.choice {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px;
  border: 2px solid var(--primary); border-radius: 999px; background: var(--sheet); font-weight: 600;
}
.choice input { width: 20px; height: 20px; accent-color: var(--primary); }
input[type=text], textarea {
  width: 100%; min-height: 48px; padding: 12px; border: 2px solid var(--primary);
  border-radius: 12px; background: var(--sheet); color: var(--on-surface); font: inherit;
}
textarea { resize: vertical; }
.hint { font-weight: 400; color: var(--muted); }
.error { color: var(--error); font-weight: 600; margin: 0; }
button {
  min-height: 56px; padding: 0 32px; border: 0; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); font-family: inherit; font-weight: 800; font-size: 16px;
  cursor: pointer; justify-self: start;
}
.secondary { background: transparent; color: var(--on-surface); border: 2px solid var(--primary); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
details.report { margin-top: 32px; }
details.report summary { cursor: pointer; font-weight: 800; min-height: 48px; display: flex; align-items: center; }
footer { margin-top: 32px; color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 600; }