/* 2base public page compositions: catalog, bases, market, tools and editorial. */
/* Ready-made base cards on /bases listing — Avito-style.
   No outer border, no shadow, just rounded cover image on top and plain
   text under it. Density of the listing creates the visual rhythm. */
.app-base-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  text-decoration: none;
  position: relative;
}
.app-base-card:hover .app-base-card__cover {
  transform: scale(1.01);
}
.app-base-card__cover {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 200ms ease;
}
.app-base-card__cover--fallback {
  /* Tint, not the old near-black gradient: a wall of dark rectangles was the
     heaviest thing on a light listing page, and it read as «broken image»
     rather than «cover pending» (mockup uses the tint placeholder). */
  background-image: linear-gradient(135deg, var(--tint) 0%, #e6e6ea 100%);
}
.app-base-card__body {
  padding: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.app-base-card__title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--brand-700);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Count is the hero — what visitors actually shop on. Price range sits
   small underneath as a "from-to per contact" hint, not the full base
   sum. */
.app-base-card__count {
  font-size: 1.05rem;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.app-base-card__count strong {
  color: var(--gray-900);
  font-weight: 700;
}
.app-base-card__count span {
  color: var(--color-text-muted);
}
.app-base-card__price {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.app-base-card__price strong {
  font-weight: 600;
}
.app-base-card__cov {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
  list-style: none;
  padding: 0;
  margin: 0.1rem 0 0;
  /* Mono for the coverage counts (mockup): they are data, and the fixed
     advance keeps «тел. / email / сайт» aligned across a grid of cards. */
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.app-base-card__cov li {
  display: inline-flex;
  gap: 0.25rem;
}
.app-base-card__cov strong {
  color: var(--gray-900);
  font-weight: 600;
}

/* Category pages contain many SKUs with the same category cover. A compact
   data-first variant removes the repeated image wall while /bases keeps the
   image-led catalog cards. */
.app-base-card--compact {
  height: 100%;
  border: 1px solid var(--tint);
  border-radius: 14px;
  background: #fff;
  padding: 15px 16px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.app-base-card--compact:hover {
  border-color: var(--color-border-hover);
  background: var(--tint);
  transform: translateY(-1px);
}

.app-base-card--compact .app-base-card__body {
  height: 100%;
  padding: 0;
}

.app-base-card--compact .app-base-card__title {
  color: var(--ink);
}

/* Native file input — make the chooser button match our brand button style. */
input[type="file"]::file-selector-button {
  cursor: pointer;
}

/* Print styles */
@media print {
  nav, footer, .no-print { display: none !important; }
  body { background: white; color: black; }
}

/* ===== Catalog screens (redesign wave 1c) =====
   Mockup screens «Каталог» / «Категория каталога»: tint tiles for the
   sub-category breakdown, a 236px filter rail beside the listing, and
   section heads underlined in ink. */

.cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 0.875rem;
}

.cat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  background: var(--tint);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
  min-height: 92px;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.cat-tile:hover {
  background: #e6e6ea;
}

.cat-tile__name {
  font-size: 0.90625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.cat-tile__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: auto;
}

/* /tools hub — navigation tiles over the workbench tools. Same tint-tile
   family as .cat-tile, one extra description line. */
.tool-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--tint);
  border-radius: 14px;
  padding: 1.25rem 1.375rem;
  min-height: 118px;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.tool-card:hover {
  background: #e6e6ea;
}

.tool-card__name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}

.tool-card__desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Listing shell: filter rail + results. Collapses at the mockup's 860px. */
.cc-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 859.98px) {
  .cc-shell {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

.side-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.5rem 0.375rem;
  border-radius: 6px;
  font-size: 0.84375rem;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.side-row:hover {
  background: var(--tint);
}

.side-row__count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
}

/* Section head with the mockup's 2px ink rule */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.sec-head__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

/* One company in a listing */
.co-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0.375rem;
  border-bottom: 1px solid var(--tint);
  transition: background-color var(--transition-fast);
}

.co-row:hover {
  background: var(--tint);
}

.co-row__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.co-row__name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-hover);
}

.co-row__meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.co-row__flags {
  display: flex;
  gap: 0.625rem;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  white-space: nowrap;
}

.seo-disclosure {
  margin-top: 32px;
  border-top: 1px solid var(--tint);
  padding-top: 18px;
}

.seo-disclosure > summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
}

.seo-disclosure > summary::-webkit-details-marker {
  display: none;
}

.seo-disclosure > summary::after {
  content: "+";
  margin-left: 8px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.seo-disclosure[open] > summary::after {
  content: "−";
}

.seo-disclosure > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Tint hero band — mockup screens «Готовые базы» / «Каталог»: a soft slab
   that opens the page, carrying the mono fact line, the H1 and one control
   row. Replaces the dark gradient hero on listing screens. */
.tint-hero {
  background: var(--tint);
  border-radius: 18px;
  padding: 1.875rem 2.125rem;
}

@media (max-width: 639.98px) {
  .tint-hero {
    padding: 1.375rem 1.25rem;
    border-radius: 14px;
  }
}

.tint-hero__title {
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

@media (max-width: 639.98px) {
  .tint-hero__title {
    font-size: 1.625rem;
  }
}

.tint-hero__lead {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 39rem;
}

/* ===== Market screens (redesign wave 1c) =====
   Screen «Рынки и статистика»: a headline stat strip under an ink rule, and
   ranked lists that read as a table of the market rather than as cards. */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--tint);
}

.stat-strip__item {
  padding: 1.125rem 1.25rem;
  border-right: 1px solid var(--tint);
}

.stat-strip__item:first-child {
  padding-left: 0;
}

.stat-strip__item:last-child {
  padding-right: 0;
  border-right: none;
}

.stat-strip__v {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Paired values («5,4 / 7,0 млн») need the smaller step or they wrap. */
.stat-strip__v--pair {
  font-size: 1.375rem;
}

.stat-strip__k {
  font-size: 0.78125rem;
  color: var(--muted);
  margin-top: 0.125rem;
}

@media (max-width: 639.98px) {
  .stat-strip__item {
    padding: 0.875rem 0.75rem;
  }

  .stat-strip__v {
    font-size: 1.5rem;
  }

  .stat-strip__v--pair {
    font-size: 1.125rem;
  }
}

/* Ranked list row — «Отрасли» / «Регионы» / «Крупнейшие города». Heavier than
   .side-row (which is rail furniture): here the list IS the content. */
.rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8125rem 0.125rem;
  border-bottom: 1px solid var(--tint);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

a.rank-row:hover {
  background: var(--tint);
}

.rank-row__count {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

/* ===== Ready-made base detail (redesign wave 1c) =====
   Screen «Карточка базы» from the mockup: cover + fact ledger, a coverage
   strip the buyer reads as «what outreach does this support», and a sticky
   panel that leads with the record count. */

/* Cover placeholder for bases with no uploaded image. Light tint, not the
   old near-white gradient that read as a rendering failure. */
.cover-fallback {
  background: linear-gradient(135deg, var(--tint) 0%, #e6e6ea 100%);
}

.cov {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 26.25rem;
}

/* Market screens give the strip a wider column than the base card does. */
.cov--wide {
  max-width: 35rem;
  gap: 0.75rem;
}

.cov__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--ink);
  margin-bottom: 0.3125rem;
}

.cov__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.cov__track {
  height: 7px;
  background: var(--tint);
  border-radius: 99px;
  overflow: hidden;
}

.cov__fill {
  height: 100%;
  background: var(--ink);
  border-radius: 99px;
}

/* The mobile row is the one a cold-calling buyer looks for first — marker
   fill so it reads as the highlight of the strip, not another grey bar. */
.cov__fill--marker {
  background: var(--marker-dot);
}

.rb-buy__qty {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rb-buy__price {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ===== Tool tabs (redesign wave 1c) =====
   The mockup's tool row. Anchors, not buttons: every tool is its own URL. */
.tool-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.tool-tab {
  border: 1px solid var(--tint);
  background: #ffffff;
  color: var(--ink);
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.tool-tab:hover {
  background: var(--tint);
}

/* Mockup `tgl(true)` — the tool rail is the same toggle as the filter chips,
   so the current tool is marker-filled, not ink-filled. Ink is reserved for
   buttons that submit money (`qbtn`, primary CTA); the rail only says
   "you are here". */
.tool-tab--active {
  background: var(--marker);
  border-color: transparent;
  color: var(--ink);
  font-weight: 600;
}

.tool-tab--active:hover {
  background: var(--marker);
}

/* 404 / 410 / 5xx numeral. Tokens: the digit is the one place besides the
   wordmark that uses the display weight, and it sits above a lime bar — the
   only decorative use of the accent on these screens. Onest is not in the
   design bundle, so Inter 800 with the wordmark's tracking stands in. */
.err-code {
  display: inline-block;
  position: relative;
  /* Onest — brand-only face, same as .brand-word (mockup «404»). */
  font-family: 'Onest', 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
  padding-bottom: 0.35rem;
}

.err-code::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 6px;
  border-radius: 99px;
  background: var(--marker);
}

/* «Действует» inside dense listings (catalog rows, director cards, ИНН page).
   The palette has no green and an active company is the default state, so a
   marker dot carries it without reintroducing a second brand colour. */
.status-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.status-ok::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--marker-dot);
}

/* HTTP verb badge in the API docs — was green/blue pills. */
.api-method {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  background: var(--tint);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Cover placeholder for posts with no image. Flat tint, not a gradient.
   Only reached from /blog/<slug>; the list itself uses .post-row (below),
   which carries no cover at all. */
.blog-cover {
  background: var(--tint);
  border-bottom: 1px solid var(--color-border);
}

/* Article row — the mockup's blog list ("Блог 2base"): a rule-separated
   reading list, not a card grid. Covers were placeholders on every post, so
   the grid rendered twelve empty tinted boxes; the list drops them and lets
   the titles carry the page. */
.post-list {
  border-top: 1px solid var(--tint);
}

.post-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.375rem 0.75rem;
  margin-inline: -0.75rem;
  border-bottom: 1px solid var(--tint);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.post-row:hover {
  background: var(--tint);
}

.post-row__body {
  max-width: 40rem;
}

.post-row__title {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Clamp lives in the component, not on a utility: app.css loads after
   tailwind.css, so any display declaration here would beat line-clamp-2's
   -webkit-box and silently unclamp the lede. */
.post-row__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}

.post-row__go {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
}

.post-row:hover .post-row__go {
  color: var(--ink);
}

@media (max-width: 640px) {
  .post-row__go {
    display: none;
  }
}

/* Cards that are themselves links. Shadows are reserved for overlays, so the
   affordance is the border darkening, not a lift. */
.app-card--hover {
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.app-card--hover:hover {
  border-color: var(--muted);
}

/* Long-form proof stays crawlable but no longer dominates the visual page. */
.case-study {
  overflow: hidden;
}

.case-study__summary {
  display: block;
  padding: 1.5rem;
  cursor: pointer;
  list-style: none;
}

.case-study__summary::-webkit-details-marker { display: none; }

.case-study__summary::after {
  content: "Открыть полный разбор ↓";
  display: block;
  margin-top: 1rem;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.case-study[open] .case-study__summary { border-bottom: 1px solid var(--tint); }
.case-study[open] .case-study__summary::after { content: "Свернуть ↑"; }
.case-study__body { padding: 0.25rem 1.5rem 1.5rem; }

.disclosure-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1rem 1.5rem;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.disclosure-summary::-webkit-details-marker { display: none; }
.disclosure-summary::after { content: "↓"; margin-left: auto; font-family: var(--font-mono); }
details[open] > .disclosure-summary::after { content: "↑"; }

.link-index { border-top: 1px solid var(--tint); }
.link-index__body { padding: 0 1.5rem 1.5rem; }

/* «Есть / Да / REST API» cells in the competitor table. Was emerald pills —
   the only green left on the public site after the redesign. Marker tint says
   the same "we have it" without reintroducing a second brand colour. */
.cmp-yes {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--marker-tint);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Section heading on content pages (about / methodology / press / …). The
   data screens use .sec-head, which pairs a title with a mono kicker; prose
   sections have nothing to put in that slot, so this is the same ink rule
   without the second column. */
.sec-h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.625rem;
  margin: 0 0 1rem;
}
/* Public lists are data surfaces: strong scanability plus visible keyboard focus. */
.cat-tile:focus-visible,
.tool-card:focus-visible,
.side-row:focus-visible,
.co-row__name:focus-visible,
.rank-row:focus-visible,
.tool-tab:focus-visible,
.app-base-card:focus-visible,
.article-row:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.side-row--ruled { border-bottom: 1px solid var(--tint); }
.catalog-page-title { letter-spacing: -0.015em; }
.sec-head__meta {
  color: var(--muted);
  font-weight: 500;
}
/* Pricing compares three factual options as a ruled ledger, not as sales cards. */
.pricing-guarantees {
  color: var(--muted);
  border-top: 1px solid var(--tint);
  border-bottom: 1px solid var(--tint);
  list-style: none;
}
.pricing-grid { border-top: 2px solid var(--ink); }
.pricing-option { border-bottom: 1px solid var(--tint); }
@media (min-width: 64rem) {
  .pricing-option--middle {
    border-left: 1px solid var(--tint);
    border-right: 1px solid var(--tint);
  }
}
.pricing-option__price { letter-spacing: -0.01em; }
.app-text-ink { color: var(--ink); }
/* Data visualizations and the print view keep functional dimensions out of markup. */
.graph-canvas { min-height: 31.25rem; }
.map-canvas {
  height: calc(100dvh - 13.75rem);
  min-height: 25rem;
}
.company-print__back {
  float: left;
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 2.375rem;
  text-decoration: underline;
  text-decoration-color: var(--color-border-hover);
  text-underline-offset: 0.1875rem;
}
.company-print__hint {
  margin-left: 0.75rem;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}