/* Article page in the new frame (owner, 26.09.2026): the old site's article layout 1:1 - sticky "In this article"
   on the left, the text in the middle, the write-a-greeting card on the right - in the new palette.
   The layout itself is templates-new/article-legacy.css (generated from the old stylesheets); this file gives it
   the tokens it expects and lets the page scroll the window, so the sticky parts and the fixed card work as they
   did on the old site. */

/* the tokens of the old main.css, in the new colours */
body.dgn-article {
  --color-primary: #bd5638;
  --color-primary-hover: #a94a2e;
  --color-primary-light: rgba(224, 120, 90, 0.16);
  --color-primary-text: #8e3b22;
  --color-text-dark: #313330;
  --color-text-muted: #4f504e;
  --color-bg-light: #fcfcfc;
  --color-bg-white: #ffffff;
  --color-page-bg: #f5f3f0;
  --color-border: rgba(178, 178, 174, 0.2);
  --color-success: #10b981;
  --color-accent-brown: #7a5744;
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10);
  --gradient-primary: linear-gradient(135deg, #bd5638 0%, #e0785a 100%);
  --gradient-cta: linear-gradient(135deg, #bd5638 0%, #e0785a 100%);
  --shadow-primary: 0 12px 24px -6px rgba(189, 86, 56, 0.35);
  --header-height: 80px; /* the new sticky header */
  font-family: var(--font-primary);
  color: var(--color-text-dark);
  background: var(--color-page-bg);
}

/* the window scrolls this page (the app frame scrolls an inner box): sticky and fixed parts behave as before */
html:has(body.dgn-article), body.dgn-article { block-size: auto; overflow-y: visible; overflow-x: clip; }
body.dgn-article .stage.rl, body.dgn-article .stage.rl.mob { position: relative; inset: auto; display: block; block-size: auto; min-block-size: 100vh; overflow: visible; }
body.dgn-article .stage.rl > .nav { position: sticky; inset-block-start: 0; z-index: 60; block-size: 80px; }
body.dgn-article .stage.rl > .body,
body.dgn-article .stage.rl .inf, body.dgn-article .stage.rl .inf.mob,
body.dgn-article .stage.rl .inf-scroll, body.dgn-article .stage.rl .inf.mob .inf-scroll { display: block; overflow: visible; block-size: auto; min-block-size: 0; }
@media (max-width: 767px) {
  body.dgn-article { --header-height: 60px; }
  body.dgn-article .stage.rl > .nav { block-size: 60px; }
}

/* the same width as the header, the blog and the footer (the project container: 1720px, 16px sides) */
body.dgn-article .article-shell { inline-size: 1720px; max-inline-size: calc(100% - 32px); margin-inline: auto; padding-inline: 0; }
@media (max-width: 767px) { body.dgn-article .article-shell { max-inline-size: calc(100% - 32px); } }

/* the reading bar sits right under the sticky header */
body.dgn-article .rp-bar { inset-block-start: var(--header-height); z-index: 59; }

/* links inside the text keep the action colour; the old base styles are not loaded here */
body.dgn-article .article-body a { color: var(--color-primary); }
body.dgn-article .article-body a:hover { color: var(--color-primary-hover); }
body.dgn-article .article-shell img { max-inline-size: 100%; block-size: auto; }
body.dgn-article .article-shell :is(ul, ol) { padding-inline-start: 0; }
body.dgn-article .article-body :is(ul, ol):not(.kt-list):not(.toc-list) { padding-inline-start: 1.4em; }
body.dgn-article .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 0; border-radius: 999px; font-weight: 600; text-decoration: none; cursor: pointer; }
body.dgn-article .btn-primary { background: var(--color-primary); color: #fff; padding: 0.8rem 1.4rem; }
body.dgn-article .btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
body.dgn-article .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the fixed write-a-wish card leaves while the footer is in view (article.php toggles .is-over-foot) */
body.dgn-article .mobile-cta-strip { transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0s; }
body.dgn-article .mobile-cta-strip.is-over-foot { opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.2s; }
@media (prefers-reduced-motion: reduce) { body.dgn-article .mobile-cta-strip, body.dgn-article .mobile-cta-strip.is-over-foot { transition: none; } }

/* our real examples inside an article (dg-media "example" token) and an article's own steps (29.09.2026) */
.article-example{margin:32px 0}
.article-example__v,.article-example__i{display:block;inline-size:100%;max-block-size:620px;object-fit:contain;border-radius:16px;background:#000}
.article-example__i{background:#e9e4dc;object-fit:cover}
.article-example__a{display:block;inline-size:100%}
.article-example__made{display:block;margin-block-start:4px;font-size:13px;color:var(--mut,#6b6b6b)}
.howto-steps{list-style:none;counter-reset:hw;display:grid;gap:14px;margin:24px 0;padding:0}
.howto-steps > li{counter-increment:hw;position:relative;padding:18px 20px;padding-inline-start:64px;border-radius:16px;background:color-mix(in oklab,var(--cta,#bd5638) 6%,#fff)}
.howto-steps > li::before{content:counter(hw);position:absolute;inset-inline-start:18px;inset-block-start:18px;inline-size:32px;block-size:32px;border-radius:50%;display:grid;place-items:center;background:var(--cta,#bd5638);color:#fff;font-weight:600}
.howto-steps > li h3{margin:0 0 6px;font-size:19px;line-height:26px}
.howto-steps > li p{margin:0}
.compare-table-wrap{overflow-x:auto;margin:24px 0;border-radius:16px;box-shadow:inset 0 0 0 1px var(--bd,#e6e1d8)}
.compare-table{inline-size:100%;border-collapse:collapse;font-size:15px;line-height:22px}
.compare-table th,.compare-table td{padding:12px 14px;text-align:start;border-block-end:1px solid var(--bd,#e6e1d8);vertical-align:top}
.compare-table thead th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut,#6b6b6b)}
.compare-table tbody tr:last-child > *{border-block-end:0}

/* The chat box of a "Generator" article (dgn_article_generator + article-gen.js, 29.09.2026): the person writes here,
   the agent answers here - options, the greeting with Copy, follow-up chips; the rest continues in the app. */
.agw{margin:28px 0 36px;padding:18px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-white);box-shadow:var(--shadow-md)}
.agw-head{display:flex;gap:10px;align-items:flex-start;color:var(--color-primary);margin-block-end:12px}
.agw-head b{display:block;color:var(--color-text-dark);font-size:17px;line-height:1.3}
.agw-head small{display:block;color:var(--color-text-muted);font-size:13px;line-height:1.45;margin-block-start:2px}
.agw-log{display:flex;flex-direction:column;gap:10px}
.agw-log:empty{display:none}
.agw-log p{margin:0;font-size:15px;line-height:1.55}
.agw-me{align-self:flex-end;max-inline-size:85%;padding:9px 13px;border-radius:16px;background:var(--color-primary-light);color:var(--color-text-dark);white-space:pre-wrap}
.agw-a{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.agw-t{color:var(--color-text-dark);white-space:pre-wrap}
.agw-wait{color:var(--color-text-muted);font-style:italic}
.agw-err{color:#a4371f}
.agw-res{inline-size:100%;padding:14px 16px;border-radius:var(--radius-md);background:var(--color-page-bg);border:1px solid var(--color-border)}
.agw-res p{white-space:pre-wrap;color:var(--color-text-dark)}
.agw-acts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-block-start:10px}
.agw-copy{font:inherit;font-size:14px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-bg-white);color:var(--color-text-dark);cursor:pointer}
.agw-copy:hover{border-color:var(--color-primary);color:var(--color-primary)}
.agw-more,.agw-links a{font-size:14px;font-weight:600;color:var(--color-primary-text);text-decoration:underline;text-underline-offset:3px}
.agw-opts{display:flex;flex-wrap:wrap;gap:8px}
.agw-opts button{font:inherit;font-size:14px;padding:7px 13px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-bg-white);color:var(--color-text-dark);cursor:pointer;text-align:start}
.agw-opts button:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}
.agw-opts button.soft{background:transparent;color:var(--color-text-muted)}
.agw-opts button:disabled{opacity:.5;cursor:default}
.agw-n,.agw-own{font-size:12px;color:var(--color-text-muted)}
.agw-links{margin:0;padding-inline-start:18px}
.agw-wall{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-md);background:var(--color-primary-light)}
.agw-cta{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:var(--color-primary);color:#fff !important;font-size:14px;font-weight:600;text-decoration:none}
.agw-cta:hover{background:var(--color-primary-hover)}
.agw-form{display:flex;gap:10px;align-items:flex-end;margin-block-start:14px}
.agw-log:empty + .agw-form{margin-block-start:0}
.agw-form textarea{flex:1;min-inline-size:0;resize:vertical;min-block-size:52px;max-block-size:220px;padding:12px 14px;border-radius:14px;border:1px solid var(--color-border);background:var(--color-bg-light);font:inherit;font-size:15px;line-height:1.5;color:var(--color-text-dark)}
.agw-form textarea:focus{outline:2px solid var(--color-primary);outline-offset:1px;background:var(--color-bg-white)}
.agw-send{flex:none;font:inherit;font-size:15px;font-weight:600;padding:12px 20px;border:0;border-radius:999px;background:var(--gradient-cta);color:#fff;cursor:pointer;box-shadow:var(--shadow-primary)}
.agw-send:disabled{opacity:.6;cursor:default}
@media (max-width:600px){.agw{padding:14px;margin:22px 0 28px}.agw-form{flex-direction:column;align-items:stretch}.agw-send{inline-size:100%}}