/* Metal Craft Engineering: the scrolling window (.win). Link it after style.css; scrollwin.js drives it. The markup
   contract is in tools/COMPONENTS.md. A window onto a longer run of text: a 14 px cut plate (the .panel values) of capped
   height, whose content scrolls inside it, fading at whichever edge has more to show. It has no snapping, no selected
   or highlighted row and no counter, and it is linked to nothing else. Past either end the scroll goes on to the page
   (overscroll-behavior stays auto), for a wheel, a trackpad and a thumb alike, so nobody is trapped in the box; the
   browser still keeps one gesture inside the window while that gesture lasts. .win--narrow is a window
   at 960 px and below only, and plain content above. Without scripts, in print and when the content fits, there is no
   cap, and without scripts or in print no plate either: the content shows as it would without the window. */
@property --fade-t{syntax:"<length>";inherits:false;initial-value:0px}
@property --fade-b{syntax:"<length>";inherits:false;initial-value:0px}

/* The frame, drawn as every plate in style.css is (fill plus a 1 px edge that follows the cut corners); repeated here so
   this file stands alone. The 2 px padding keeps the scrollbar off the edge. */
html.js .win{position:relative;padding:2px;--cut:var(--cut-xl,14px);--edge:var(--line);--fill:var(--surface);--ew:1px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(var(--edge),var(--edge)) top/100% var(--ew) no-repeat,linear-gradient(var(--edge),var(--edge)) bottom/100% var(--ew) no-repeat,
    linear-gradient(var(--edge),var(--edge)) left/var(--ew) 100% no-repeat,linear-gradient(var(--edge),var(--edge)) right/var(--ew) 100% no-repeat,
    linear-gradient(to bottom right,transparent 50%,var(--edge) 0 calc(50% + var(--ew)),transparent 0) top left/var(--cut) var(--cut) no-repeat,
    linear-gradient(to bottom right,transparent calc(50% - var(--ew)),var(--edge) 0 50%,transparent 0) bottom right/var(--cut) var(--cut) no-repeat,var(--fill);
  transition:--edge .25s,--fill .25s}
/* The cap (--win-cap): 26rem (about 416 px) on a computer, and on a phone min(68svh, 36rem), so a phone shows most of a
   screen of it; --win-h on the .win, or an ancestor, changes it. scrollwin.js then trims the cap so that its lower
   edge cuts through the middle of a line (data-cut, below), which shows at a glance that the text goes on. The side
   padding is the ember margin: sparks live in it and never cross the text (48 px on a computer, 28 px on a phone). */
@property --win-cap{syntax:"<length>";inherits:true;initial-value:0px}
html.js .win{--win-cap:var(--win-h,26rem)}
@media (max-width:640px){html.js .win{--win-cap:var(--win-h,min(68svh,36rem))}}
html.js .win-scroll{max-height:var(--win-cap);overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto;position:relative;z-index:1;
  padding:.25rem 48px;scroll-padding-top:.75rem;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  --fade-b:1.25rem;
  /* The fades are short and never fully clear: the line at the very edge still shows at 35%. */
  -webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0/.35) 0,#000 var(--fade-t),#000 calc(100% - var(--fade-b)),rgb(0 0 0/.35) 100%);
  mask-image:linear-gradient(to bottom,rgb(0 0 0/.35) 0,#000 var(--fade-t),#000 calc(100% - var(--fade-b)),rgb(0 0 0/.35) 100%);
  transition:--fade-t .25s,--fade-b .25s}
@media (max-width:640px){html.js .win-scroll{padding-inline:28px}}
/* The trimmed cap: data-cut-a counts 64 px blocks and data-cut-b 4 px steps (CSP: no style attributes). */
html.js .win-scroll[data-cut-a]{max-height:min(var(--win-cap),calc(var(--cut-a,0px) + var(--cut-b,0px)))}
.win-scroll[data-cut-a="2"]{--cut-a:128px}.win-scroll[data-cut-a="3"]{--cut-a:192px}.win-scroll[data-cut-a="4"]{--cut-a:256px}
.win-scroll[data-cut-a="5"]{--cut-a:320px}.win-scroll[data-cut-a="6"]{--cut-a:384px}.win-scroll[data-cut-a="7"]{--cut-a:448px}
.win-scroll[data-cut-a="8"]{--cut-a:512px}.win-scroll[data-cut-a="9"]{--cut-a:576px}
/* Taller caps (the works map's list window matches the map's height, up to about 820 px: map.css). */
.win-scroll[data-cut-a="10"]{--cut-a:640px}.win-scroll[data-cut-a="11"]{--cut-a:704px}.win-scroll[data-cut-a="12"]{--cut-a:768px}
.win-scroll[data-cut-a="13"]{--cut-a:832px}.win-scroll[data-cut-a="14"]{--cut-a:896px}.win-scroll[data-cut-a="15"]{--cut-a:960px}
.win-scroll[data-cut-b="1"]{--cut-b:4px}.win-scroll[data-cut-b="2"]{--cut-b:8px}.win-scroll[data-cut-b="3"]{--cut-b:12px}
.win-scroll[data-cut-b="4"]{--cut-b:16px}.win-scroll[data-cut-b="5"]{--cut-b:20px}.win-scroll[data-cut-b="6"]{--cut-b:24px}
.win-scroll[data-cut-b="7"]{--cut-b:28px}.win-scroll[data-cut-b="8"]{--cut-b:32px}.win-scroll[data-cut-b="9"]{--cut-b:36px}
.win-scroll[data-cut-b="10"]{--cut-b:40px}.win-scroll[data-cut-b="11"]{--cut-b:44px}.win-scroll[data-cut-b="12"]{--cut-b:48px}
.win-scroll[data-cut-b="13"]{--cut-b:52px}.win-scroll[data-cut-b="14"]{--cut-b:56px}.win-scroll[data-cut-b="15"]{--cut-b:60px}
html.js .win-scroll.is-scrolled{--fade-t:1.25rem}
html.js .win-scroll.is-end,html.js .win--fits>.win-scroll{--fade-b:0px}
/* Fits, or would hide less than 240 px (scrollwin.js): no window at all, the content as it is, like .win--narrow above
   960 px. */
html.js .win--fits{clip-path:none;padding:0;background:none}
html.js .win--fits>.win-scroll{max-height:none;overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none}
html.js .win:hover>.win-scroll,html.js .win-scroll:focus-visible{scrollbar-color:var(--accent,var(--red)) transparent}
/* slop-ok: outline-none replaced by designed :focus-visible (the window's own plate edge, 2 px and light) */
html.js .win-scroll:focus-visible{outline:none}
html.js .win:has(>.win-scroll:focus-visible){--edge:var(--txt);--ew:2px}
/* The friction embers (scrollwin.js): a canvas under the text, clipped by its plate, drawn only in the side margins and
   never in the way of the pointer. */
.win-sparks{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}

/* The standard gap from a logo grid above, so the plate's cut corner never meets a tile's border. */
html.js :is(.logos+.win,.logos+link+.win){margin-top:var(--gap)}   /* the page's first window has its stylesheet link before it */
/* A section that ends in a window closes with the section head's own spacing (style.css .sec-head), not a full section
   padding, so no empty band opens between the plate and the next section. */
html.js .sec:has(>.wrap>.win:not(.win--fits):last-child){padding-bottom:clamp(40px,5vw,72px)}

/* Inside the window nothing is highlighted, and a linked row lines up with the window's top (the page still keeps it
   clear of the header through its own scroll-padding-top). */
.win .rowi:target{background:none}
html.js .win:not(.win--fits) :is(.rowi,.facts>div){scroll-margin-top:0}
/* B2 (division tabs): the Clientele rows carry data-seg, and tabs.css lights the chosen division's rows (a red rule and
   a wash) and dims the other's. A window has no selected row, so inside one every row stays plain and flush, whichever
   division is chosen. This sits here, not in tabs.css, so the window stays independent of the tabs. */
.win .rowi[data-seg]{padding-left:0;margin-left:0;border-left:0;background:none;transition:none}
.win .rowi[data-seg] h3{color:inherit}

/* The plate is the frame, so the lists inside lose their outer rules. */
@media screen and (min-width:961px){
  html.js .win:not(.win--narrow,.win--fits) .rows{border-top:0}
  html.js .win:not(.win--narrow,.win--fits) :is(.rowi,.facts>div):last-child{border-bottom:0}
  html.js .win:not(.win--narrow,.win--fits) .facts>div:first-child{border-top:0}
  html.js .win:not(.win--narrow,.win--fits) .ticks{margin-bottom:.5rem;border-bottom:0}
  /* .win--narrow above 960 px: plain content, as if there were no window. */
  html.js .win--narrow{clip-path:none;padding:0;background:none}
  html.js .win--narrow>.win-scroll,html.js .win--narrow>.win-scroll[data-cut-a]{max-height:none;overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none}
}
@media screen and (max-width:960px){
  html.js .win:not(.win--fits) .rows{border-top:0}
  html.js .win:not(.win--fits) :is(.rowi,.facts>div):last-child{border-bottom:0}
  html.js .win:not(.win--fits) .facts>div:first-child{border-top:0}
  html.js .win:not(.win--fits) .ticks{margin-bottom:.5rem;border-bottom:0}
  /* Story, mission, vision (About): inside a narrow window the three panels run as headed blocks under a hairline. */
  html.js .win--narrow:not(.win--fits) .panels{display:block}
  html.js .win--narrow:not(.win--fits) .panel{clip-path:none;padding:1.25rem 0;border-top:1px solid var(--line);background:none}
  html.js .win--narrow:not(.win--fits) .panel:first-child{padding-top:1rem;border-top:0}
}
/* .win--wide (Q16): a window above 768 px only; on a phone plain content, as if there were no window (scrollwin.js
   gives it .win--fits there too; this rule keeps the first paint plain before the script runs). */
@media screen and (max-width:768px){
  html.js .win--wide{clip-path:none;padding:0;background:none}
  html.js .win--wide>.win-scroll,html.js .win--wide>.win-scroll[data-cut-a]{max-height:none;overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none}
}
@media (prefers-reduced-motion:reduce){html.js .win-scroll{transition:none}}
@media (forced-colors:active){
  html.js .win:not(.win--fits){clip-path:none;border:1px solid CanvasText}
  html.js .win:has(>.win-scroll:focus-visible){outline:2px solid Highlight}
  .win-sparks{display:none}
}
@media print{
  html.js .win{clip-path:none;padding:0;background:none}
  html.js .win-scroll,html.js .win-scroll[data-cut-a]{max-height:none;overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none}
  .win-sparks{display:none}
}
html:not(.js) .win-sparks{display:none}