/* Страница услуги и переход с главной. Общие шрифт, цвета и элементы — styles.css. */
/* Блоки-входы на услуги (главная и «Соседние задачи»): та же сетка 5/7, заголовок крупнее, а у каждой услуги строка
   со стрелкой в клетке своего цвета: мятный — агенты, голубой — закупки, персиковый — запасы, как в меню и в полях сканвордов */
.agents-entry { border-top: 2px solid var(--ink); background: var(--paper); padding: clamp(48px, 6vw, 88px) 0; }
.agents-entry + .agents-entry { border-top: 1px solid var(--rule-soft); padding-top: clamp(40px, 5vw, 64px); }
.agents-entry:has(+ .agents-entry) { padding-bottom: clamp(40px, 5vw, 64px); }
.agents-entry-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.agents-entry h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem); }
.agents-entry .ag-eyebrow { margin-bottom: 16px; }
.entry-list { border-top: 2px solid var(--ink); }
.entry-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--rule-soft); }
.entry-item p { margin: 0; color: var(--ink-2); max-width: 39em; }
.entry-item > div > .link-arrow { display: inline-block; margin-top: 14px; }
.entry-cell {
  width: 40px; height: 40px; background: var(--c, var(--cell)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6.5 18.5 12 13 17.5' fill='none' stroke='%23141414' stroke-width='2.25' stroke-linecap='square'/%3E%3C/svg%3E") center / 24px no-repeat;
  outline: 2px solid var(--ink); outline-offset: -2px;
}
.entry-agents { --c: var(--mint); }
.entry-supply { --c: var(--sky); }
.entry-planning { --c: var(--peach); }
.ag-eyebrow { margin-bottom: 24px; color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .025em; }
.ag-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.ag-hero { padding: 32px 0 clamp(64px, 8vw, 112px); }
.ag-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; color: var(--muted); font-size: .875rem; }
.ag-breadcrumb a { text-underline-offset: 4px; }
.ag-hero h1 { font-size: clamp(2.5rem, 1.45rem + 2.75vw, 4rem); }
.ag-hero .ag-eyebrow { margin-bottom: 20px; }
.ag-hero .lead { margin-top: 24px; }
.ag-hero .hero-facts { margin-top: 28px; }
.ag-sheet { background: var(--cell); border: 2px solid var(--ink); color: var(--ink); min-width: 0; }
.ag-hero-sheet { margin-top: 4px; }
.ag-sheet-mast { padding: 18px clamp(20px, 2.6vw, 32px); border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-weight: 600; }
.ag-small { font-size: .8125rem; line-height: 1.5; font-weight: 400; }
.ag-sheet-mast .ag-small { color: var(--muted); }
.ag-sheet-intro { padding: 20px clamp(20px, 2.6vw, 32px) 24px; max-width: 36em; color: var(--ink-2); }
.ag-route[role="list"] { list-style: none; padding: 0 clamp(20px, 2.6vw, 32px); }
.ag-route li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--rule-soft); }
.ag-route-n { height: 36px; border: 1.5px solid var(--ink); display: grid; place-items: center; font-weight: 600; }
.ag-route-selected { background: var(--marker); }
.ag-route b { font-weight: 600; }
.ag-route p { margin-top: 3px; font-size: .9375rem; color: var(--muted); }
.ag-sheet-foot { padding: 20px clamp(20px, 2.6vw, 32px); border-top: 2px solid var(--ink); margin-top: 6px; font-size: .875rem; }
.ag-white { background: var(--cell); border-top: 2px solid var(--ink); }
.ag-paper { background: var(--paper); border-top: 2px solid var(--ink); }
.ag-section-head .section-lead { max-width: 28em; }
.ag-scenario { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--rule-soft); }
.ag-scenario:first-child { border-top: 2px solid var(--ink); }
.ag-index { height: 48px; display: grid; place-items: center; border: 2px solid var(--ink); font-size: 1.25rem; font-weight: 600; }
.ag-scenario h3, .ag-rules h3, .ag-stages h3, .ag-contact-sheet h3 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); line-height: 1.2; letter-spacing: -.02em; }
.ag-scenario p { margin-top: 14px; color: var(--ink-2); }
.ag-scenario .ag-result { font-size: .9375rem; margin-top: 16px; }
.ag-result b { color: var(--ink); font-weight: 600; }
.ag-margin-note { margin-top: 28px; color: var(--muted); font-size: .9375rem; }
.ag-dark { background: var(--night); color: var(--night-text); border-top: 2px solid var(--ink); }
.ag-dark .ag-eyebrow { color: var(--night-muted); }
.ag-dark .section-lead { color: var(--night-text); }
.ag-example-note { margin-top: 28px; color: var(--night-muted); font-size: .875rem; max-width: 33em; }
.ag-letter { margin-top: 36px; padding: 22px 0; border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.ag-letter > p + p { margin-top: 12px; font-size: 1.25rem; line-height: 1.5; }
.ag-letter .ag-small { color: var(--night-muted); }
.ag-example-nav { display: none; padding: 20px clamp(20px, 2.6vw, 32px); border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap; gap: 8px; }
.ag-example-sheet.is-interactive .ag-example-nav { display: flex; }
.ag-example-nav button { padding: 10px 12px; min-height: 44px; background: var(--cell); color: var(--ink); border: 1.5px solid var(--ink); font: inherit; font-size: .875rem; cursor: pointer; border-radius: 0; }
.ag-example-nav button[aria-selected="true"] { background: var(--word); }
.ag-example-nav button:hover { background: var(--word-hover); }
.ag-example-panel { padding: 28px clamp(20px, 2.6vw, 32px) 30px; min-height: 370px; }
.ag-example-panel[hidden] { display: none; }
.ag-example-panel > .ag-small { color: var(--muted); margin-bottom: 14px; }
.ag-example-panel h3 { font-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; }
.ag-fields { margin-top: 24px; }
.ag-fields > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule-soft); font-size: .9375rem; }
.ag-fields dt { color: var(--muted); }
.ag-fields dd { font-weight: 600; }
.ag-panel-text { margin-top: 20px; color: var(--ink-2); font-size: .9375rem; }
.ag-example-bottom { padding: 20px clamp(20px, 2.6vw, 32px); border-top: 2px solid var(--ink); display: grid; gap: 14px; }
.ag-example-bottom .ag-small { color: var(--muted); }
.ag-example-bottom a { justify-self: start; }
.ag-rules { border-top: 2px solid var(--ink); }
.ag-rules article { padding: 28px 0; border-bottom: 1px solid var(--rule-soft); }
.ag-rules p { margin-top: 14px; color: var(--ink-2); }
.ag-stages { padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.ag-stages li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--rule-soft); }
.ag-stages p { margin-top: 14px; color: var(--ink-2); }
.ag-stage-output { font-size: .9375rem; }
.ag-stage-price { font-size: .9375rem; font-weight: 600; padding-top: 12px; }
.ag-stage-price span { display: block; margin-top: 6px; font-size: .8125rem; color: var(--muted); font-weight: 400; }
.agents-page .ag-faq summary { grid-template-columns: 2em minmax(0, 1fr) 20px; gap: 12px; padding: 20px 8px; }
/* стрелка вопроса: та же клетка, что у «Направлений» в шапке; открытый вопрос — жёлтая и перевёрнутая */
.agents-page .ag-faq summary::after {
  content: ""; justify-self: end; width: 20px; height: 20px;
  background: var(--cell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / 18px no-repeat;
  outline: 1.5px solid var(--ink); outline-offset: -1.5px;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.agents-page .ag-faq details[open] summary::after { background-color: var(--marker); transform: rotate(180deg); }
.agents-page .ag-faq details p { padding: 18px 8px 24px 54px; }
.ag-contact-sheet { background: var(--cell); border: 2px solid var(--ink); padding: clamp(24px, 3vw, 40px); }
.ag-contact-sheet ul { margin: 24px 0 28px; padding-left: 20px; list-style-type: square; }
.ag-contact-sheet li + li { margin-top: 10px; }
.ag-contact-sheet .ag-small { margin-top: 18px; color: var(--muted); }
@media (min-width: 901px) { .ag-section-head { position: sticky; top: 110px; } }
@media (max-width: 1100px) and (min-width: 901px) { .agents-page .nav { gap: 14px; font-size: .8125rem; } .agents-page .header-inner { gap: 20px; } }
@media (max-width: 900px) {
  .ag-grid, .agents-entry-grid { grid-template-columns: minmax(0, 1fr); }
  .ag-breadcrumb { margin-bottom: 32px; }
  .ag-hero-sheet { margin-top: 0; }
  .ag-section-head .section-lead { max-width: 36em; }
}
@media (max-width: 640px) {
  .ag-hero { padding-top: 24px; }
  .ag-hero .hero-actions { align-items: stretch; }
  .ag-hero .hero-actions .link-arrow { align-self: flex-start; }
  .ag-scenario, .ag-stages li { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
  .ag-index { height: 36px; font-size: 1rem; }
  .ag-fields > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ag-example-panel { min-height: 430px; }
  .ag-example-nav button { flex: 1 1 40%; }
  .ag-contact-sheet .btn { width: 100%; }
  .ag-hero .hero-facts { margin-top: 24px; }
  .agents-entry { padding: 40px 0; }
  .entry-item { grid-template-columns: 32px minmax(0, 1fr); gap: 16px; }
  .entry-cell { width: 32px; height: 32px; background-size: 20px; }
}

/* ---------- единый язык графики страниц направлений ----------
   Те же клетки и пастель, что у сканворда главной: шаг 1 — голубой, шаг 2 — мятный, шаг 3 — сиреневый,
   шаг 4 или решение человека — персиковый. Жёлтый только у ключевой клетки, выбранного шага и ответа. */
.dp-xw-wrap { padding: 28px clamp(20px, 2.6vw, 32px) 0; }
.agents-page { --field: #e3f3ea; }
.supply-page { --field: #e4f0f9; }
.planning-page { --field: #fbf1e4; }
.xw-page .xw-cell:not(.is-letter):not(.is-block) { background: var(--field); }

[data-word="task"], [data-word="search"], [data-word="fact"] { --w: var(--sky); --w2: var(--sky-2); }
[data-word="data"], [data-word="supplier"] { --w: var(--mint); --w2: var(--mint-2); }
[data-word="result"], [data-word="eval"], [data-word="forecast"] { --w: var(--lilac); --w2: var(--lilac-2); }
[data-word="decision"], [data-word="choice"], [data-word="order"] { --w: var(--peach); --w2: var(--peach-2); }
[data-word="agent"] { --w: var(--pink); --w2: var(--pink-2); }
.xw-page:is([data-active="task"], [data-active="search"], [data-active="fact"]) .xw-cell.is-word { background: var(--sky-2); }
.xw-page:is([data-active="data"], [data-active="supplier"]) .xw-cell.is-word { background: var(--mint-2); }
.xw-page:is([data-active="result"], [data-active="eval"], [data-active="forecast"]) .xw-cell.is-word { background: var(--lilac-2); }
.xw-page:is([data-active="decision"], [data-active="choice"], [data-active="order"]) .xw-cell.is-word { background: var(--peach-2); }
.xw-page[data-active="agent"] .xw-cell.is-word { background: var(--pink-2); }
.xw-page .xw-cell.is-letter:hover:not(.is-word):not(.is-key) { background: #f0f5ff; }

.xw-clues { list-style: none; margin: 24px clamp(20px, 2.6vw, 32px) 0; padding: 0; border-top: 2px solid var(--ink); }
.xw-clues .clue-row { grid-template-columns: 2.6em minmax(0, 1fr); color: var(--ink); font: inherit; }
.xw-clues .clue-row i { min-width: 1.7em; width: auto; padding: 0 0.3em; }
.xw-clues .clue-row b { font-weight: 600; }
.xw-clues .clue-row em { font-size: 0.9375rem; }
.xw-clues .clue-row:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.xw-clues .clue-row.clue-static { cursor: default; }
.xw-clues .clue-row.clue-static:hover { background: none; }
.xw-clues .clue-static i { background: var(--check-wash); outline: 1.5px dashed var(--check); }

/* номера шагов в списках: тот же цвет шага, что у слова сканворда */
:is(.ag-scenario, .ag-stages > li, .ag-route > li):nth-child(4n+1) { --w: var(--sky); }
:is(.ag-scenario, .ag-stages > li, .ag-route > li):nth-child(4n+2) { --w: var(--mint); }
:is(.ag-scenario, .ag-stages > li, .ag-route > li):nth-child(4n+3) { --w: var(--lilac); }
:is(.ag-scenario, .ag-stages > li, .ag-route > li):nth-child(4n) { --w: var(--peach); }
.ag-index, .ag-route-n { background: var(--w, var(--cell)); }
.ag-route-selected { background: var(--marker); }

/* шаги примера: вкладки в цвете шага, выбранная плотнее и жирнее */
.ag-example-nav button:nth-child(5n+1) { --w: var(--sky); --w2: var(--sky-2); }
.ag-example-nav button:nth-child(5n+2) { --w: var(--mint); --w2: var(--mint-2); }
.ag-example-nav button:nth-child(5n+3) { --w: var(--lilac); --w2: var(--lilac-2); }
.ag-example-nav button:nth-child(5n+4) { --w: var(--peach); --w2: var(--peach-2); }
.ag-example-nav button:nth-child(5n) { --w: var(--pink); --w2: var(--pink-2); }
.ag-example-nav button { background: color-mix(in srgb, var(--w) 55%, white); }
.ag-example-nav button:hover { background: var(--w); }
.ag-example-nav button[aria-selected="true"] { background: var(--w2); font-weight: 600; }
.ag-example-nav button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }