/* Product layer on top of the shared PAGE-STYLE kit (assets/sza-kit.css, byte-identical to the reference),
   linked after the kit on every page of the site: the landing, the portal, the privacy and not-found pages.
   Only what an Informational / Docs page needs beyond the kit lives here, in the kit's tokens
   (PAGE-STYLE section 5 "Extending the kit"). Pages span the full viewport less the kit's --gutter; this
   layer sets no width cap on a page, a container, a section or a wrapper of ordinary text (SITE-EXPERIENCE 20). */
  :root{
    --pill-bg: color-mix(in srgb, var(--acc) 10%, transparent);
  }
  body{font-size:16px}
  a:hover{text-decoration:underline}
  code{background:var(--bg-3); padding:.08em .38em; border-radius:5px; font-size:.88em}

  /* header: the kit's floating glass bar, allowed to wrap at 360px */
  .site-header{flex-wrap:wrap}
  .brand{font-size:15px}
  .icon{width:16px; height:16px; fill:currentColor; flex:none}
  .icon-sprite{display:none}
  .feedback-copy-done{color:var(--acc)}   /* PAGE-STYLE 4.7: the copied word beside the action.copy glyph */
  .icon-status-error,.feedback-status-error{color:var(--danger)}
  .seg button{display:inline-flex; align-items:center; justify-content:center}
  .btn{justify-content:center}
  .to-top .icon{width:20px; height:20px}

  main{padding:0 var(--gutter) 40px; position:relative; z-index:1}

  /* ---------- hero ---------- */
  .hero{padding:1.2rem 0 14px; border-bottom:1px solid var(--border); margin-bottom:4px}
  .hero .kicker b{font-weight:800; color:var(--text)}
  .hero .lead{color:var(--text-2)}
  .hero .cta{display:flex; gap:10px; flex-wrap:wrap}
  .hero .hero-note{font-size:14px; margin:12px 0 0}
  .hero .kit-updated{font-size:13px; margin:6px 0 0}
  .minimum-start{margin:16px 0 4px; padding:14px 16px; border:1px solid var(--border); border-left:3px solid var(--acc); border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:var(--card); scroll-margin-top:90px}
  .minimum-start h2{margin:0 0 5px; font-size:16px; line-height:1.35}
  .minimum-start p{margin:0; font-size:14.5px; color:var(--text-2)}

  /* the skill-run illustration inside a section (not the kit's one-line .demo strip) */
  .demo-panel{margin:16px 0 4px}
  .demo-cap{font-size:14px; margin:0 0 8px}
  .demo-cap strong{color:var(--text)}
  .demo-log{margin:0; font-size:12.5px; line-height:1.5}
  .toolbar{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 2px}

  /* before/after: the same assistant, week one, side by side */
  .ba{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border);
    border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin:16px 0 6px; font-size:13.5px}
  .ba>div{background:var(--bg-2); padding:9px 13px; line-height:1.45}
  .ba>.h{font-family:var(--font-heading); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em}
  .ba>.h.l{color:var(--gold)}
  .ba>.h.r{color:var(--ok)}
  .ba>.l:not(.h){color:var(--muted)}

  /* ---------- numbered collapsible sections (the table of contents) ---------- */
  .sections{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; align-items:start; margin-top:16px}
  @media(max-width:760px){ .sections{grid-template-columns:1fr} }
  details.sec{padding:0; margin:0; overflow:hidden; scroll-margin-top:90px}
  details.sec[open]{grid-column:1 / -1; box-shadow:var(--shadow)}
  details.sec>summary{align-items:flex-start; gap:11px; padding:13px 16px; font-family:var(--font-body); font-weight:600; font-size:inherit}
  details.sec>summary:hover .sectitle{color:var(--acc-strong)}
  details.sec>*:not(summary){margin-bottom:0}
  .secnum{font-size:13px; line-height:1.6; flex:none}
  .sechead{display:flex; flex-direction:column; gap:2px; min-width:0}
  .sectitle{margin:0; font-family:var(--font-heading); font-size:16px; font-weight:700; letter-spacing:-.01em; line-height:1.35}
  .sectitle code{font-size:.9em; padding:.05em .35em}
  .secteaser{color:var(--muted); font-weight:400; font-size:13px; line-height:1.42}
  details.sec[open] .secteaser{display:none}
  .secbody{padding:4px 18px 16px 18px}
  .secbody h3{scroll-margin-top:90px}
  details.sec[open] .secbody{border-top:1px solid var(--border); margin-top:2px; padding-top:12px}

  h3{font-size:17px; margin:18px 0 4px}
  p{margin:10px 0}
  ul,ol{margin:10px 0; padding-left:22px}
  li{margin:5px 0}
  strong{color:var(--text)}
  .muted{color:var(--muted)}

  pre{
    background:var(--code-bg); color:var(--code-ink); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:14px 16px; overflow:auto; font-size:13px; line-height:1.5; margin:10px 0;
  }
  pre.diagram{color:color-mix(in srgb, var(--code-ink) 80%, transparent)}

  .grid{grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:12px; margin:16px 0}
  .card{padding:14px 16px; border-radius:var(--radius-sm)}
  .card h3{margin:0 0 4px; font-size:15px}
  .card p{margin:4px 0 0; font-size:14px; color:var(--muted)}
  .card .num{font-family:var(--font-heading); font-size:12px; font-weight:700; color:var(--acc); letter-spacing:.1em}

  .note{font-size:14.5px; margin:18px 0}
  .note p{font-size:inherit; margin:.4em 0 0}

  .pills{margin:14px 0}
  .pill{font-family:var(--font-body); font-size:12.5px; font-weight:500; letter-spacing:0; color:var(--text-2)}
  .pill b{color:var(--text); font-weight:700}

  /* ---------- footer: kit form, plus the per-locale product line ---------- */
  .site-footer{color:var(--muted); font-size:14px; position:relative; z-index:1}
  .site-footer .cta{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0}
  .tools-family{margin:24px 0 0; padding-top:14px; border-top:1px solid var(--border)}
  .tools-family h2{margin:0 0 10px; color:var(--text); font-size:15px}
  .tools-grid a{display:flex; align-items:center; min-height:44px}
  .tools-grid a:hover{text-decoration:none; color:var(--text)}
  .footer-bottom{padding-top:14px; border-top:1px solid var(--border); margin-top:4px}
  .provenance{font-size:13px; margin:14px 0 0}

  pre:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
  .seg button:focus-visible{outline-offset:-2px}

  .adopt-prompt{margin:16px 0 22px}
  .adopt-prompt details{background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 14px 14px}
  .adopt-prompt summary{cursor:pointer; font-weight:600; color:var(--acc-strong); list-style:none; display:flex; align-items:center; gap:8px; min-height:44px; padding:4px 2px}
  .adopt-prompt summary::-webkit-details-marker{display:none}
  .adopt-prompt .prompt-actions{display:flex; justify-content:flex-end; margin:2px 0 8px}
  .adopt-prompt pre{margin:0; max-height:none}
  .adopt-step{font-weight:700; color:var(--acc-strong)}
  .adopt-prompt + p{margin-top:2px}

  /* language switching (PAGE-STYLE section 6): the UA label keys "ua"; lang, hreflang and ?lang= keep ISO "uk" */
  html[data-lang="ru"] [data-l]:not([data-l="ru"]){display:none}
  html[data-lang="en"] [data-l]:not([data-l="en"]){display:none}
  html[data-lang="ua"] [data-l]:not([data-l="ua"]){display:none}

  /* Print: dark theme prints unreadable, and collapsed sections drop their content.
     A beforeprint handler opens every collapsed section; these rules force readable ink on white. */
  @media print{
    .site-header, .bg-blobs, .to-top, .hero .cta, .site-footer .cta, .adopt-prompt .prompt-actions{display:none !important}
    html, body{background:#fff !important; color:#111 !important}
    .sections{display:block !important}
    details.sec{grid-column:auto !important; break-inside:avoid; box-shadow:none !important; backdrop-filter:none !important;
      background:#fff !important; border-color:#bbb !important; margin:0 0 10px}
    .secteaser{display:none !important}
    .card, .note, .minimum-start, pre{background:#fff !important; color:#111 !important; border-color:#bbb !important; box-shadow:none !important}
    .ba{background:#bbb !important; border-color:#bbb !important}
    .ba>div{background:#fff !important; color:#111 !important}
    pre, pre.diagram{color:#111 !important}
    strong, .sectitle{color:#111 !important}
    .muted, .card p, .secteaser{color:#333 !important}
    a{color:#111 !important; text-decoration:underline}
    a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.8em; color:#555}
  }

  /* skip link (SITE-EXPERIENCE 15): the first focusable element of every page, visible only while focused */
  .skip-link{position:absolute; left:var(--gutter); top:-120px; z-index:100; padding:.7rem 1.1rem; border-radius:var(--radius-sm);
    background:var(--acc); color:var(--acc-ink); font-weight:700; text-decoration:none}
  .skip-link:focus{top:8px; color:var(--acc-ink); text-decoration:none}

  /* the fallback for visitors without JavaScript (SITE-EXPERIENCE 4: layout and colour live here, not in a style attribute) */
  .noscript-note{margin:14px 0 0; padding:11px 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg-2); color:var(--muted); font-size:14px}

  /* the labelled navigations of the landing (SITE-EXPERIENCE 16) and the link from a section to its portal section */
  .header-nav{display:flex; align-items:center}
  .header-link{display:inline-flex; align-items:center; min-height:44px; padding:0 8px; color:var(--text-2); font-weight:600; font-size:14px}
  .header-link:hover{color:var(--text)}
  .footer-bottom nav a{display:inline-flex; align-items:center; min-height:44px}
  .portal-link{margin:14px 0 0; font-size:14px}

  /* Light-theme contrast (SITE-EXPERIENCE 17): white text on the kit's --acc measures 4.11:1, below 4.5:1 for text.
     The kit's own --acc-strong (about 5.4:1 behind white) is used behind white text instead, until the kit revision
     asked for in the catalog's 2026-10-07 contrast proposal lands; a dated registry exception records this override. */
  html[data-theme="light"] .btn-primary,
  html[data-theme="light"] .seg button[aria-pressed="true"],
  html[data-theme="light"] .seg button.on,
  html[data-theme="light"] .skip-link{background:var(--acc-strong)}
  html[data-theme="light"] .btn-primary:hover{background:var(--acc-strong); filter:brightness(.92)}