/* Product-level presentation only. The shared kit stays byte-identical. */

/* FULL WIDTH. Owner decision 2026-10-06 (restating PAGE-CONTENT "Layout contract" / PAGE-STYLE section 1):
   every page uses the whole width of the screen. There is no centred column, no px cap on text, headings,
   the header or the footer. Narrow measures belong inside a card or a callout only, never to a page.
   tools/Test-SiteQuality.ps1 rule 8 fails a page or this file that brings a cap back. */
/* --gutter is the kit's (PAGE-STYLE 1.3: clamp(16px,2.5vw,40px)); this layer no longer redefines it. --wide repeats the kit's value
   so the Test-SiteQuality rule 8 guard on this file keeps reading it. */
:root{--wide:100%}
.container{max-width:none;width:100%;padding-inline:var(--gutter)}
.site-header{max-width:none;margin:14px var(--gutter)}
.hero h1,.hero .lead,.lead,.lead-narrow,.sec-head,.section-desc,.get,.callout,.note{max-width:none}
.site-header>.brand{margin-right:auto}
.brand-mark{display:inline-flex;align-items:center;gap:.5rem}
.brand-mark img{width:24px;height:24px;filter:grayscale(1) contrast(2)}
.hero{text-align:left;padding:1.2rem 0}
.hero .lead,.lead-narrow,.section-desc{max-width:none}
.button-group,.hero-actions{justify-content:flex-start}
.get{max-width:none;margin:.4rem 0 1.5rem}
.scenario-card{display:flex;flex-direction:column;min-height:210px}
.scenario-card p{flex-grow:1}
.site-footer .container{max-width:var(--wide)}
.footer-langs{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:14px;opacity:.85}
.footer-langs a{text-decoration:none}
.script-ar,.script-ur{font-family:var(--font-body),"Nirmala UI","Segoe UI",sans-serif}
.script-hi{font-family:var(--font-body),"Nirmala UI",sans-serif}
.script-bn{font-family:var(--font-body),"Nirmala UI",sans-serif}
.script-zh{font-family:var(--font-body),"Microsoft YaHei UI",sans-serif}
[dir="rtl"]{text-align:right}
[dir="rtl"] .site-header,[dir="rtl"] .channels,[dir="rtl"] .footer-bottom{direction:rtl}
[dir="rtl"] .brand{margin-right:0;margin-left:auto}
[dir="rtl"] .quickstart li{padding-left:0;padding-right:2rem}
[dir="rtl"] .quickstart li::before{left:auto;right:0}
[dir="rtl"] .note{border-left:1px solid var(--border);border-right:3px solid var(--gold)}
[dir="rtl"] details.sec>summary::after{margin-left:0;margin-right:auto}
@media(min-width:1300px){.grid{grid-template-columns:repeat(4,1fr)}.tools-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:480px){.container{width:100%;max-width:100%;padding:0 12px}.site-header{max-width:calc(100% - 24px);min-width:0;padding:8px 10px;gap:6px}.brand-mark{flex:1 1 0;min-width:0}.brand{min-width:0;font-size:13px;line-height:1.2;white-space:normal}.seg button{padding:5px 8px}.hero .lead,.sec-head p,.scenarios .card p{overflow-wrap:anywhere}}

/* First screen: the recognisable program icon, the full name in a prominent size (owner request 2026-10-06). */
.hero-id{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);margin:0 0 1.2rem}
.app-icon{flex:none;width:clamp(88px,11vw,168px);height:auto;aspect-ratio:1;border-radius:22%;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hero h1{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere}
@media(max-width:560px){.hero-id{flex-direction:column;align-items:flex-start}}

/* Every language, in the header, one control (<details>, no script needed to open it). */
.lang-menu{position:relative}
.lang-menu>summary{list-style:none;cursor:pointer;font-family:var(--font-heading);font-size:11px;font-weight:700;
  letter-spacing:.04em;padding:7px 12px;border:1px solid var(--border);border-radius:20px;color:var(--muted);white-space:nowrap}
.lang-menu>summary::-webkit-details-marker{display:none}
.lang-menu>summary::after{content:" \25BE"}
.lang-menu[open]>summary,.lang-menu>summary:hover{color:var(--text);border-color:var(--border-hover)}
.lang-pop{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:40;display:grid;
  grid-template-columns:repeat(3,minmax(8rem,1fr));gap:2px;padding:8px;min-width:26rem;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.lang-pop a{padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--text-2);font-size:.92rem}
.lang-pop a:hover,.lang-pop a.on{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--text)}
@media(max-width:640px){.lang-pop{position:fixed;inset-inline:var(--gutter);top:64px;min-width:0;grid-template-columns:repeat(2,1fr)}}

/* Footer: author, documentation, the author's other projects. */
.footer-title{font-family:var(--font-heading);font-size:1.1rem;margin:0 0 .8rem}
.link-row{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;margin:0 0 1.4rem}
.link-row a{text-decoration:none;font-weight:600}
.link-row a:hover{text-decoration:underline}
.author-card{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;margin:1.2rem 0 0;padding-top:1rem;
  border-top:1px solid var(--border);color:var(--muted);font-size:.92rem}
.author-card b{font-family:var(--font-heading);color:var(--text);font-size:1rem}
.author-card a{text-decoration:none;font-weight:600}
.author-card a:hover{text-decoration:underline}
.author-card b a{color:inherit;font-family:inherit;font-weight:inherit}
.doors .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}

/* Keyboard and landmarks (SITE-EXPERIENCE rules 15-16, ticket 152 T-1): the skip link is the first focusable thing on
   a page and shows only while it has focus; the header links sit in one labelled nav that keeps the header's flex row. */
.skip-link{position:absolute;inset-inline-start:var(--gutter);top:0;z-index:100;display:inline-flex;align-items:center;min-height:44px;
  padding:.5rem 1.1rem;border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--acc);color:var(--acc-ink);
  font-family:var(--font-heading);font-weight:700;text-decoration:none;transform:translateY(-120%)}
.skip-link:focus{transform:none}
.skip-link:hover{color:var(--acc-ink)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main:focus{outline:none}
.site-nav{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
@media print{.skip-link{display:none}}

/* Light theme legibility (SITE-EXPERIENCE rule 17, ticket 152 T-3). The kit's light accent (#2f8f3a) is 3.65 : 1 on the page
   and 4.11 : 1 under white ink, and its gold (#9a6a13) 4.19 : 1 on the page - both below 4.5 : 1. A local override until the hub
   answers the kit proposal; the dark theme passes as shipped, so nothing here touches it. */
html[data-theme="light"]{--acc:#216f2b;--acc-strong:#1a5d24;--gold:#7e560f;--gold-strong:#6b4709}

/* Touch targets (rule 17, ticket 158 T-4, owner ruling 2026-10-07): 44 px for EVERY pointer, by padding and not by a larger
   font (PAGE-STYLE section 1: "44px touch targets"; the kit itself lifts only on a coarse pointer, so this page layer carries
   the fine-pointer half and the kit file stays byte-identical to the catalog copy). */
.brand,.lang-menu>summary,.lang-pop a,.footer-bottom a,.footer-langs a,.link-row a,.author-card a,.xlinks a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.lang-pop a{display:flex}
.xlinks a{justify-content:flex-start}
.btn,.seg button,.theme-btn,.tools-grid a{min-height:44px}
.seg button,.theme-btn{min-width:44px}
.copybox .copy{min-height:44px;min-width:44px;top:50%;transform:translateY(-50%)}

/* 360 px (SITE-EXPERIENCE rule 17, ticket 152 T-5): a grid or flex child may be narrower than its content, so a long
   command or a row of buttons wraps inside its box instead of widening the page (body hides the overflow, it did not scroll);
   a table scrolls inside its own frame; a long unbroken token breaks. */
.get>*,.dl-row>*,.grid>*,.section>*{min-width:0}
@media(max-width:560px){.copybox{white-space:normal;overflow-wrap:anywhere}}
.tbl-wrap{max-width:100%;overflow-x:auto}
main :where(p,li,dd,dt,h1,h2,h3,td,th,code){overflow-wrap:break-word}
:where(.steps,.keys,.two,.cards)>*{min-width:0}
/* Code surfaces stay dark in the light theme (kit: --code-bg), so they keep the dark theme's ink - the darkened light
   accent and muted ink above would read 2.3 : 1 on them. */
html[data-theme="light"] :where(.copybox,.demo,pre){--acc:#3fb950;--acc-strong:#56d364;--gold:#e3b341;--muted:#94a08c;--text:#f1f5ee;--border-hover:rgba(63,185,80,.35)}
/* On a narrow screen the header controls wrap to a second row instead of pushing the last one off the page. */
@media(max-width:480px){.site-nav{flex-wrap:wrap;row-gap:4px}}

/* Layout that used to be written as style="" attributes on the pages (specification 154, SITE-EXPERIENCE rule 4): a page
   carries a class, the stylesheet owns the value. The doubled selectors outrank the kit's single-class rule whichever
   order the sheets load in. */
.key-hint{color:var(--muted);font-size:.8rem}
.xlinks.xlinks-tight{margin-top:.4rem}
.tools-grid.tools-grid-spaced{margin-bottom:1rem}
.sec-head.sec-head-family{margin-bottom:1rem;font-size:1.1rem}
details.sec.sec-spaced{margin-top:1.5rem}
.grid.grid-spaced{margin-top:1rem}
.button-group.button-group-spaced{margin:2rem 0}
.pill-row{margin-bottom:1rem}
.card.card-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.muted.muted-block{display:block;margin-top:.2rem}
h3.flush-top{margin-top:0}
p.flush-bottom{margin-bottom:0}
ul.flush-list{margin:0}
.lead-narrow.lead-small{font-size:15px;margin-top:1rem}
.meta-strong{color:var(--acc);font-weight:600}
.glyph{display:inline-block;vertical-align:-.15em;margin-inline-end:.3em;flex:none}
/* Section lists: the kit zeroes the padding, so an outside marker hangs in the gutter - in a right-to-left page at 360 px that
   is 2 px past the page and the Arabic landing scrolled sideways (specification 158 F-3). Keep the marker inside the box. */
.section>ul{padding-inline-start:1.25em}

/* Reduced motion reaches the pseudo-elements too (PAGE-STYLE 1.5, section 5). The kit's own rule selects only `*`, which does
   not match ::before or ::after, while the kit transitions details.sec>summary::after. The catalog still owes the kit revision
   that selects `*,*::before,*::after`; this page-layer copy of the same declarations drops out when that revision is vendored. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}