/* Свої — the one stylesheet. Tokens are copied verbatim from design/tokens.css (source of truth: 03-design §4).
   Mobile-first, light only, one breakpoint (760 px), no component library. Class names mirror design/wireframes/. */

/* ---------- Tokens (design/tokens.css) ---------- */
:root {
  --paper: #f8f3e8;
  --surface: #ffffff;
  --ink: #1e1a16;
  --muted: #6b635a;
  --accent: #2d6b3f;
  --danger: #b42318;

  --border: rgba(30, 26, 22, 0.14);
  --border-strong: rgba(30, 26, 22, 0.32);
  --accent-tint: rgba(45, 107, 63, 0.1);
  --rule: 1px solid rgba(30, 26, 22, 0.18);
  --danger-tint: rgba(180, 35, 24, 0.08);
  --ink-tint: rgba(30, 26, 22, 0.06);
  --overlay: rgba(30, 26, 22, 0.55);

  --font-heading: "Lora", "Georgia", "Times New Roman", serif;
  --font:
    "Fixel Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-38: 2.375rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --lh-tight: 1.15;
  --lh-body: 1.5;
  --lh-read: 1.6;
  --measure: 64ch;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --gap-tight: 6px;
  --gap-loose: 40px;

  --r-sm: 2px;
  --r-md: 3px;
  --r-pill: 999px;
  --shadow-card:
    0 1px 2px rgba(30, 26, 22, 0.06), 0 4px 14px rgba(30, 26, 22, 0.06);
  --tap: 44px;
  --w-page: 960px;
  --w-read: 640px;
  --photo: 96px;
  --photo-list: 56px;

  --t-fast: 120ms;
  --t-base: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
  }
}

/* Fixel Text (MacPaw, OFL-1.1). Static woff2, Cyrillic + Latin. Licence: public/static/fonts/OFL.txt */
@font-face {
  font-family: "Fixel Text";
  src: url("/static/fonts/FixelText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fixel Text";
  src: url("/static/fonts/FixelText-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/static/fonts/Lora-Bold-cyrillic.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Lora";
  src: url("/static/fonts/Lora-Bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  src: url("/static/fonts/Lora-BoldItalic-cyrillic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Lora";
  src: url("/static/fonts/Lora-BoldItalic-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
a {
  color: var(--accent);
  text-underline-offset: 2px;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
[hidden] {
  display: none !important;
}
.tnum {
  font-variant-numeric: tabular-nums;
}
h1,
h2 {
  font-family: var(--font-heading);
}
h1 {
  font-size: var(--fs-30);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  margin: var(--gap-loose) 0 var(--s-2);
  overflow-wrap: anywhere;
}
h2 {
  font-size: var(--fs-24);
  line-height: var(--lh-tight);
  margin: var(--s-8) 0 var(--s-3);
}
p {
  margin: 0 0 var(--s-3);
}
.lead {
  color: var(--muted);
  font-size: var(--fs-18);
  max-width: 56ch;
  margin: 0 0 var(--s-6);
}
.small,
.hint {
  font-size: var(--fs-14);
  color: var(--muted);
}
.hint {
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  margin: 0;
}
.meta,
.muted {
  font-size: var(--fs-14);
  color: var(--muted);
  margin: var(--s-1) 0 0;
}
.crumbs {
  font-size: var(--fs-14);
  color: var(--muted);
  margin: var(--s-4) 0;
}

/* ---------- Shell ---------- */
/* Skip link (a11y): visually hidden until it receives keyboard focus, then a pill at the top-left. */
.skip {
  position: absolute;
  left: var(--s-4);
  top: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--surface);
  color: var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  transform: translateY(-200%);
  z-index: 10;
}
.skip:focus-visible {
  transform: none;
}
.wrap {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 0 var(--s-4) var(--s-4);
}
.dev-banner {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  font-size: var(--fs-14);
  padding: var(--s-1) var(--s-4);
}
.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 var(--s-4);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
}
.logo {
  display: flex;
  flex-direction: column;
  min-height: var(--tap);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-30);
  color: var(--ink);
  text-decoration: none;
  line-height: var(--lh-tight);
}
.logo small {
  color: var(--muted);
  font-family: var(--font);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-14);
  color: var(--muted);
  white-space: nowrap;
}
.site-header nav a,
.foot a,
.links a {
  display: inline-block;
  padding: var(--s-3) 0; /* 44 px tap target on text links */
}
.page {
  padding-bottom: var(--gap-loose);
}
.page-profile,
.page-static,
.page-error,
.page-success {
  max-width: var(--w-read);
}
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-4);
  margin-top: var(--s-12);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-14);
  color: var(--muted);
}

/* ---------- Buttons, badges, chips ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--t-fast);
}
.btn:hover {
  box-shadow: var(--shadow-card);
}
.btn .tnum {
  white-space: nowrap;
}
.btn.primary {
  background: var(--accent);
  color: var(--surface);
}
.btn.quiet {
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn.danger {
  border-color: var(--danger);
  color: var(--danger);
}
.badge {
  display: inline-block;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-1);
}
.badge.ok {
  background: var(--accent-tint);
  color: var(--accent);
}
.badge.no {
  background: var(--ink-tint);
  color: var(--muted);
}
.chip {
  display: inline-block;
  font-size: var(--fs-12);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 1px var(--s-2);
  margin-right: var(--s-1);
}

/* ---------- Category grid (/<city>) ---------- */
.cats {
  display: grid;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.cats a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-3) 0;
  background: transparent;
  border: none;
  border-bottom: var(--rule);
  border-radius: 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: color var(--t-fast);
}
.cats a:hover {
  color: var(--accent);
}
.cats small {
  flex-shrink: 0;
  color: var(--muted);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  text-align: right;
}
.add-self {
  margin-top: var(--s-8);
}

/* ---------- Profile rows (/<city>/<category>) ---------- */
.list {
  display: grid;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.row {
  display: grid;
  grid-template-columns: var(--photo-list) 1fr;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  background: transparent;
  border: none;
  border-bottom: var(--rule);
  border-radius: 0;
}
.row.verified {
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  box-shadow: none;
  padding-left: var(--s-4);
}
.row.unclaimed {
  background: transparent;
  color: var(--muted);
  border-bottom: var(--rule);
}
.row.unclaimed .avatar {
  opacity: 0.7;
}
.row .actions {
  grid-column: 1 / -1;
  margin: 0;
}
.ph {
  width: var(--photo-list);
  height: var(--photo-list);
  border-radius: var(--r-md);
  background: var(--ink-tint);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
  object-fit: cover;
  flex-shrink: 0;
}
.ph-page,
.sheet .ph {
  width: var(--photo);
  height: var(--photo);
  font-size: var(--fs-24);
}
.name {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  margin: 0;
}
.name a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  padding: var(--s-3) 0; /* 44 px hit area without moving the layout */
  margin: calc(-1 * var(--s-3)) 0;
}
.name a:hover {
  text-decoration: underline;
}
.empty {
  background: transparent;
  border: none;
  border-top: var(--rule);
  border-bottom: var(--rule);
  border-radius: 0;
  padding: var(--gap-loose) 0;
  text-align: left;
}
.empty-title {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--s-2);
}
.empty .meta {
  margin: 0 0 var(--s-4);
}
.missing {
  margin-top: var(--s-6);
}

/* ---------- Profile sheet (/p/<slug>) ---------- */
.sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.sheet.verified {
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
.sheet.unclaimed {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--muted);
}
.sheet h1 {
  margin: var(--s-1) 0;
  color: var(--ink);
}
.top {
  display: grid;
  grid-template-columns: var(--photo) 1fr;
  gap: var(--s-4);
  align-items: start;
}
.actions {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-6) 0;
}
.proof {
  display: grid;
  gap: var(--s-1);
  background: transparent;
  border-top: 3px double var(--accent);
  border-bottom: 3px double var(--accent);
  border-radius: 0;
  padding: var(--s-3) 0;
  padding-right: 40px;
  font-size: var(--fs-14);
  position: relative;
}
.proof::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.proof b {
  color: var(--accent);
}
.facts {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: var(--gap-tight) var(--s-3);
  margin: var(--s-6) 0;
}
.facts dt {
  color: var(--muted);
}
.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.bio {
  font-size: var(--fs-18);
  line-height: var(--lh-read);
  margin: var(--s-6) 0;
  white-space: pre-line;
}
.bio-note {
  font-size: var(--fs-16);
}
.links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-14);
}
.claim {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-top: var(--s-6);
  font-size: var(--fs-14);
}
.claim .btn {
  margin-top: var(--s-3);
}

/* ---------- /pro ---------- */
.two {
  display: block;
}
.card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--s-4) 0;
  border-bottom: var(--rule);
}
.card.accent {
  border: none;
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  padding: var(--s-4);
  box-shadow: none;
  border-radius: 0;
}
.price {
  font-size: var(--fs-38);
  font-weight: var(--fw-bold);
  line-height: 1;
  margin: var(--s-2) 0;
}
.price small {
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  color: var(--muted);
}
.card ul {
  padding-left: 1.2em;
  margin: var(--s-2) 0;
}
.card li {
  margin: var(--s-1) 0;
}
.steps {
  display: grid;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps li {
  border-left: 3px solid var(--accent);
  padding: var(--s-1) var(--s-3);
}
.steps b {
  display: block;
}
.ok {
  background: var(--accent-tint);
  border-radius: var(--r-md);
  padding: var(--s-3);
  font-size: var(--fs-14);
  margin: var(--s-2) 0;
}
.err {
  color: var(--danger);
  font-size: var(--fs-14);
  margin: 0;
}
.errors {
  background: var(--danger-tint);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  color: var(--danger);
  font-size: var(--fs-14);
}
.errors ul {
  margin: var(--s-1) 0 0;
  padding-left: 1.2em;
}
.errors a {
  color: var(--danger);
}
.en {
  border-top: 1px solid var(--border);
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  font-size: var(--fs-14);
  color: var(--muted);
  max-width: var(--measure);
}

/* ---------- Forms ---------- */
form.card {
  display: grid;
  gap: var(--s-3);
}
.email-form {
  max-width: 440px;
}
.form {
  max-width: 560px;
}
.field {
  display: grid;
  gap: var(--s-1);
}
label,
legend {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}
input,
select,
textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
input[type="file"] {
  padding: var(--s-2) var(--s-3);
}
input[aria-invalid="true"] {
  border-color: var(--danger);
}
textarea {
  min-height: 120px;
  resize: vertical;
}
fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  min-width: 0;
  margin: 0;
  padding: var(--s-2) var(--s-3) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
legend {
  padding: 0 var(--s-1);
}
.check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
}
.check.grow {
  flex: 1 1 220px;
}
.check.grow input {
  flex: 1;
}
.check.consent {
  align-items: flex-start;
  min-height: 0;
}
.check.consent input {
  margin-top: 3px;
}
.pair {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 2fr;
  gap: var(--s-2);
}

/* ---------- /me ---------- */
.banner {
  background: var(--accent-tint);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.banner.grey {
  background: var(--ink-tint);
}
.banner-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.upsell p {
  margin: var(--s-2) 0;
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-6);
}
.row-actions form {
  display: contents;
}
.page-me .hint {
  font-size: var(--fs-14);
  margin-top: var(--s-3);
}

/* ---------- Copy pages, errors ---------- */
.prose {
  line-height: var(--lh-read);
}
.prose p {
  max-width: var(--measure);
  margin: 0 0 var(--s-4);
}
.page-error .btn,
.page-success .btn {
  margin-top: var(--s-2);
}

/* ---------- /owner (English, desktop tool; table scrolls on phones) ---------- */
.owner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  font-size: var(--fs-14);
  color: var(--muted);
}
.flash {
  border-radius: var(--r-md);
  padding: var(--s-3);
  font-size: var(--fs-14);
}
.flash.err {
  background: var(--danger-tint);
  color: var(--danger);
}
.table-wrap {
  overflow-x: auto;
}
.owner-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-14);
}
.owner-table th {
  background: var(--ink-tint);
  text-align: left;
  font-weight: var(--fw-medium);
}
.owner-table th,
.owner-table td {
  padding: var(--s-2);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.owner-table input,
.owner-table select {
  width: auto;
  padding: var(--s-2);
}
form.inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin: 0 var(--s-1) var(--s-1) 0;
}
.actions-cell {
  white-space: nowrap;
}

/* ---------- ≥ 760 px ---------- */
@media (min-width: 760px) {
  h1 {
    font-size: var(--fs-38);
  }
  .sheet h1 {
    font-size: var(--fs-30);
  }
  .cats {
    grid-template-columns: 1fr 1fr;
  }
  .row {
    grid-template-columns: var(--photo-list) 1fr auto;
    align-items: center;
  }
  .row .actions {
    grid-column: auto;
    display: flex;
    align-self: center;
  }
  .actions {
    grid-template-columns: max-content 1fr;
  }
  form.card .btn.primary {
    justify-self: start;
  }
}