/* Бюро Знахідок — the guide pages (/dovidnyk/).
 *
 * Loaded after shell.css (tokens, panel, index rows) and legal.css (prose), so
 * this file is only the parts a guide adds: breadcrumbs, the table of
 * contents, step rows, callouts, the law quote, the FAQ and the hub.
 *
 * Nothing here is rounded and nothing is raised. Where the old cards drew a
 * box, these draw a rule and let the space do the separating.
 */

:root {
  --mint: #2e9e76;
  --warn: #b4531f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mint: #57c8a0;
    --warn: #e08b5c;
  }
}

/* The reading measure. The hub is a list, not prose, so it runs wider. */
.guide,
.notfound {
  max-width: var(--column);
}

.hub {
  max-width: 940px;
}

/* The list runs wide; the sentence that introduces it still reads at the
   prose measure. */
.hub > h1,
.hub > .lede {
  max-width: var(--column);
}

/* --------------------------------------------------------- breadcrumbs */

.crumbs {
  margin: 0 0 var(--space-7);
}

.crumbs ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 18px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.crumbs li + li {
  margin-top: 0;
}

/* The separator is decoration, so it is drawn rather than written into the
   markup — a screen reader announces the list, not a pile of slashes. */
.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--line-strong);
}

.crumbs [aria-current] {
  color: var(--muted);
}

/* ---------------------------------------------------------------- intro */

.lede {
  margin: var(--space-4) 0 var(--space-8);
  font-size: var(--text-body-lg);
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}

.guide h2,
.hub h2 {
  scroll-margin-top: var(--space-7);
}

/* -------------------------------------------------- table of contents */

.toc {
  margin: 0 0 var(--space-8);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.toc p {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc li + li {
  margin-top: 6px;
}

.toc a {
  color: var(--ink);
  font-size: var(--text-body-sm);
  font-weight: 600;
}

.toc a:hover {
  color: var(--accent);
}

/* ---------------------------------------------------------------- steps */

/* Rows on rules rather than cards: the number sits in its own column, the
   same 56px the hub's index rows use, so the two read as one system. */
.steps {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--line-soft);
}

.steps > li {
  margin-top: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  /* No row gap: the heading and its paragraph sit in the same column, and the
     heading's own margin is the space between them. */
  gap: 0 var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line-soft);
  counter-increment: step;
}

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  padding-top: 3px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-variant-numeric: tabular-nums;
}

/* The heading and its paragraph are separate children, so both have to be
   told to stay in the second column — auto-placement would drop the
   paragraph back under the number, into a 56px gutter. */
.steps > li > * {
  grid-column: 2;
}

.steps h3 {
  margin: 0 0 6px;
  font-size: var(--text-body-lg);
  line-height: 26px;
}

.steps p {
  margin: 0;
}

/* -------------------------------------------------------------- callout */

/* .note comes from legal.css; the warning variant trades the frame for a
   single heavy edge, so the two never read as the same object. */
.note--warn {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
}

.note--warn h3 {
  color: var(--warn);
}

/* ------------------------------------------------------------------ law */

.law {
  margin: 0 0 var(--space-6);
  padding: 0 0 0 20px;
  border-left: 3px solid var(--mint);
}

.law blockquote {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink-2);
}

.law figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 18px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.law figcaption a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.law figcaption a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------------ cta */

.cta-card {
  margin: var(--space-9) 0;
  padding: var(--space-7);
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.cta-card h3 {
  margin: 0 0 10px;
  font-size: var(--text-h);
  line-height: 1.25;
  letter-spacing: var(--tracking-snug);
}

.cta-card p {
  margin: 0 0 var(--space-5);
}

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.store-btn {
  min-height: 46px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: background-color var(--transition), color var(--transition);
}

.store-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

/* ------------------------------------------------------------------ faq */

.faq {
  margin: 0 0 var(--space-6);
  border-top: 1px solid var(--line-soft);
}

.faq details {
  border-bottom: 1px solid var(--line-soft);
}

.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  color: var(--ink);
  font-weight: 700;
  font-size: var(--text-body);
  line-height: 25px;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--accent);
}

/* The sign is drawn from the summary rather than added as an element, so the
   answer text stays the only thing inside <details> that a crawler reads. */
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 500;
}

.faq details[open] summary::after {
  content: "–";
}

.faq p {
  margin: 0 0 var(--space-4);
}

/* -------------------------------------------------------------- related */

.related {
  margin: var(--space-9) 0 0;
  padding: var(--space-7) 0 0;
  border-top: 1px solid var(--line);
}

.related h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-h-sm);
  line-height: 27px;
}

.related ul {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.related li + li {
  margin-top: 0;
  border-top: 1px solid var(--line-soft);
}

.related a {
  display: block;
  padding: 12px 0;
  color: var(--ink);
  font-weight: 600;
}

.related a:hover {
  color: var(--accent);
}

.related-all {
  margin: 0;
  font-size: var(--text-body-sm);
}

.related-all a {
  display: inline;
  padding: 0;
  color: var(--accent);
}

/* ------------------------------------------------------------------ hub */

.cluster {
  margin: var(--space-9) 0 0;
  scroll-margin-top: var(--space-7);
}

.cluster h2 {
  margin: var(--space-2) 0 var(--space-1);
}

.cluster-intro {
  margin: 0 0 var(--space-5);
  color: var(--muted);
}

/* -------------------------------------------------------------- 404 page */

.notfound ul {
  list-style: none;
  padding: 0;
  font-weight: 600;
}

/* --------------------------------------------------------- breakpoints */

@media (max-width: 759px) {
  .cta-card {
    padding: var(--space-5) var(--space-4);
  }

  /* On a phone the number rides above the heading instead of beside it — a
     56px indent would leave the text in a gutter. */
  .steps > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .steps > li::before,
  .steps > li > * {
    grid-column: 1;
  }

  .steps > li::before {
    padding-top: 0;
  }
}