/* g47 · Moreno's second review (lanes/sw-site/brief-g47.md). Loaded after g46.css on every /g22/ page. */

/* A · the water replaces the diagonal beams (img/g37-light.webp) on the page and in the solid header.
   Before WebGL draws, and without WebGL, the still of the same water (img/g47-water.webp, the shader's first frame, 1 px = 2 CSS px)
   sits in the very same place: fixed to the window, anchored bottom left like the shader. */
html:root .g-sky{inset:0;height:auto;background:url(img/g47-water.webp) left bottom/3200px 2000px no-repeat,var(--g-wall)}
html:root .g-sky::before{display:none}
@media (min-width:3201px),(min-height:2001px){html:root .g-sky{background-size:cover}}
.g47-w{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
html.g47-gl .g-sky{background:none}
/* the solid header: the same water as the page behind it (g47w.js copies the rows), the grain, a faint hairline; no beams */
html:root header.gh.g37-solid{background:url(img/g47-water.webp) left bottom/3200px 2000px no-repeat fixed,var(--g-wall)}
.g47-hc{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block;opacity:0}
html.g47-gl header.gh.g37-solid{background:var(--g-wall)}
html.g47-gl header.gh.g37-solid .g47-hc{opacity:1}

/* C · no arrow on any button or action link (Moreno: "ik wil geen één pijltje bij een knop zien"). Only the chevrons that open something stay
   (menu, dropdowns, the select and date controls, the date picker's months). The embedded example demos keep their own buttons. */
html:root :is(.btn,.gx-btn,.gx-lnk,.g-tl,.g-bb-more,.sj-alt,a.nextlink,.g40-vc a.g43-cap,.pk-ex a,.pk-exa):not(:is(.awd,[data-demo],.sj-demo,.fd) *)::after{content:none!important;display:none!important}
/* g47.2 (desk 6 Nov) · the month buttons of our date pickers carry a word, like every other button that was only an arrow.
   Done here and not in g15.js/g46.js, which /g44/ and /g46/ load too. */
html:root .g46-dp-n{width:auto;min-width:0;padding:0 12px;color:#a6dcc1;font-family:inherit;font-weight:600;font-size:13px;line-height:36px;letter-spacing:.01em;white-space:nowrap}
html:root .g46-dp-n::before{content:"Volgende";position:static;width:auto;height:auto;border:0;transform:none}
html:root .g46-dp-n[data-d="-1"]::before{content:"Vorige"}
html:root .g-cal-n{width:auto;padding:0 12px;font-family:inherit;font-weight:600;font-size:13px;line-height:34px;white-space:nowrap}
html:root .g-cal-n svg{display:none}
html:root .g-cal-n::before{content:"Volgende"}
html:root .g-cal-n[data-m="-1"]::before{content:"Vorige"}
/* g47.2 C · the embedded example demos lose their arrows too; the label keeps its place */
html:root .sj-demo :is(.btn,.sj-alt)::after{content:none!important;display:none!important}
/* the green button: a clean pill, label centred, the same height; hover lifts the colour and the shadow, press sinks it */
html:root :is(.btn,.gx-home .gx-btn):not(:is(.awd,[data-demo],.sj-demo,.fd) *){padding:0 30px;gap:0;justify-content:center;text-align:center;
  transition:background-color .22s var(--g-ease),box-shadow .22s var(--g-ease),translate .12s var(--g-ease)}
html:root :is(.btn,.gx-home .gx-btn):not(.ghost):not(:is(.awd,[data-demo],.sj-demo,.fd) *):hover{background:color-mix(in srgb,var(--g-pop) 86%,#fff)!important}
html:root :is(.btn,.gx-home .gx-btn):not(.ghost):not(:is(.awd,[data-demo],.sj-demo,.fd) *):active{background:color-mix(in srgb,var(--g-pop) 88%,#000)!important;translate:0 1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 16px -12px rgba(116,214,166,.5),0 4px 10px -8px rgba(0,0,0,.9)}
html:root .btn.ghost:hover{box-shadow:inset 0 0 0 1px rgba(243,238,228,.8)}
/* the flow diagrams (request sent, request received): a short line between the two cards, no arrowhead */
.ui-arr.g47-ln{display:block;width:34px;height:1px;background:rgba(243,238,228,.35);align-self:center;font-size:0}

/* D · the home block without the offer line: moved down by that line's height (28 px), the gallery stays where it is */
html:root .g22-hall .g47-head{translate:0 28px}
/* F.3 · /contact/: "Name — role" on one line, as on Over ons and Vacatures */
html body .g47-wl{display:flex!important;flex-wrap:nowrap;align-items:baseline;gap:12px;margin:12px 0 0}
html body .g47-wl>b{display:flex!important;align-items:baseline;gap:12px}
html body .g47-wl>b::after{content:""!important;display:block!important;width:14px;height:1px;align-self:center;background:rgba(116,214,166,.6)}
html body .g47-wl>span{display:block;margin:0!important;white-space:nowrap}

/* G · chips and radio-style controls: selected = one border and fill; the focus ring only from the keyboard (:focus-visible), never after a click.
   The old .g37-pill:focus-within ring matched after every mouse click (the radio inside takes focus) and drew a second border. */
html body .g37-pill:focus-within{outline:none!important}
html body .g37-pill input:focus-visible+span{outline:2px solid #a6dcc1;outline-offset:3px}
html body .g37-pill input:focus:not(:focus-visible)+span{outline:none}

/* H.2 · the three merk packages side by side: words in the cells, no ticks; Merk compleet carries a quiet mint field */
.g47-cmp .h2{margin-bottom:34px}
.g47-ct{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;color:var(--soft)}
.g47-ct th,.g47-ct td{padding:15px 18px;text-align:left;vertical-align:top;border-top:1px solid rgba(243,238,228,.12)}
.g47-ct thead th{border-top:0;padding-bottom:20px;vertical-align:bottom}
.g47-ct thead th .serif{display:block;font-size:26px;line-height:1.15;color:var(--txt)}
.g47-ct thead th b{display:block;margin-top:6px;font-size:17px;font-weight:600;color:var(--g-mint)}
.g47-ct tbody th{width:24%;font-weight:600;color:var(--txt)}
.g47-ct td{width:25.33%}
.g47-ct .g47-ct-m{background:rgba(116,214,166,.07);color:var(--txt)}
.g47-ct thead .g47-ct-m{border-radius:14px 14px 0 0}
.g47-ct tbody tr:last-child .g47-ct-m{border-radius:0 0 14px 14px}
.g47-los{margin:-4px 0 22px;max-width:620px;font-size:16px;line-height:1.55;color:var(--soft)}

/* ---------------------------------------------------------------- g47 B · one motion system (audit in docs/g47/DONE-g47.md, inventory docs/g47/w/motion.mjs)
   One easing (--g-ease, a calm ease-out) and four durations: t1 press, t2 hover and colour, t3 open, close, nav, header and links that draw,
   t4 reveals and image hover. Durations are set only on rules that already declare a transition, so nothing new starts to move.
   Embedded example demos (.awd, [data-demo], .sj-demo, .fd) keep their own motion: they show a client's site as it is. */
:root{--g-t1:.15s;--g-t2:.25s;--g-t3:.45s;--g-t4:.6s}
@media (prefers-reduced-motion:no-preference){
  body :not(:is(.awd,[data-demo],.sj-demo,.fd) *){transition-timing-function:var(--g-ease)!important;animation-timing-function:var(--g-ease)}
  /* the g43 hover family: no growth on hover (it moved the text and bounced past its size), a short press, colour in t2 */
  html :is(.btn,.gx-home .gx-btn,.gx-lnk,.g-tl,a.nextlink,.sj-alt,.g-bb-more,.g42-hpl,.g37-pill,.g43-chip,.g22-n,.g22-dd-m a,.g43-tap){transition-duration:var(--g-t1),var(--g-t2),var(--g-t2),var(--g-t2),var(--g-t2)!important;transition-timing-function:var(--g-ease)!important}
  html :is(.btn,.gx-home .gx-btn,.gx-lnk,.g-tl,a.nextlink,.sj-alt,.g-bb-more,.g42-hpl,.g37-pill,.g43-chip,.g43-tap,.g22-n,.g22-dd-m a,.g46-gt,.g46-vk-o,.g46-dp-n,.mk-jump a,.g-acts a.link):is(:hover,.open>*){scale:none!important}
  html .g22-dd.open>.g22-n{scale:none!important}
  html :is(.btn,.gx-home .gx-btn,.gx-lnk,.g-tl,a.nextlink,.sj-alt,.g-bb-more,.g42-hpl,.g43-chip,.g43-tap,.g22-n,.g22-dd-m a,.mk-jump a,.g-acts a.link):active{scale:.97!important}
  html :is(.mk-jump a,.g-acts a.link){transition-duration:var(--g-t1),var(--g-t2)!important}
  html:root .gh :is(.g22-nav .g22-n,.g22-dd-m a)::before{transition-duration:var(--g-t2)!important}
  /* hover and colour */
  :is(.trades a,.ex .list button,.form input,.form textarea,.next .nextlink,.post .t,.pk-row,.xidx a,.copy,.gx-copy,.g22-dd-m a,.pk15 .pk-row,.b22-chip,.g34-v,.gx-btn,.g46-vk-o,.g46-pick,.g46-dp-n,.g46-gt,.g46-gt img,.g22-dd-b svg,.g46-chev,.g37-in,.link):not(:is(.awd,[data-demo],.sj-demo,.fd) *){transition-duration:var(--g-t2)!important}
  :is(.pk,[data-tool]) :is(input[type=radio],input[type=checkbox]){transition-duration:var(--g-t2)!important}
  .g46-day{transition-duration:var(--g-t1)!important}
  .pk-gs::after{transition-duration:var(--g-t2)!important}
  .btn::after,.gx-home .gx-btn::after{transition-duration:var(--g-t3)!important}
  /* open, close, nav, header, drawn links, print hover */
  :is(html:root header.gh,.hd,.g22-dd-m a b,.g22-dd-m .g24-ml,.g23-tbar,.g-piece a,.g-close-art,.g-row>a,.wp-a,.g37-vt .g-print,.gx-cap,.ex .pane,.g25-fr>img,.g-print.g25-fr.g25-frw):not(:is(.awd,[data-demo],.sj-demo,.fd) *){transition-duration:var(--g-t3)!important}
  html:root :is(.gx-lnk,.g-tl,a.nextlink,.sj-alt,.g-bb-more)::after{transition-duration:var(--g-t3),var(--g-t2)!important}
  :root .g22-n{transition-duration:var(--g-t2),var(--g-t3)}
  .gf nav a{transition-duration:var(--g-t3),var(--g-t2)!important}
  /* reveals and image hover: t4, and reveals travel 12 px, not 16 to 48 */
  :is(.rise,[data-rv]>*,.b30-img img,.b30-fi img,.g32-lf img){transition-duration:var(--g-t4)!important}
  .rise:not(.in){transform:translateY(12px)!important}
  [data-rv]:not(.rv-in)>*{translate:0 12px!important}
  /* the home opening: prints and heading arrive in under a second and a half, not three */
  html:root .gx-home .g22-wall .g22-p{animation-name:g47-in!important;animation-duration:.9s!important;animation-delay:calc(.15s + var(--i) * .08s)!important;animation-timing-function:var(--g-ease)!important}
  .g22-head>*{animation-name:g47-up!important;animation-duration:.6s!important;animation-timing-function:var(--g-ease)!important}
}
@keyframes g47-in{from{opacity:0;translate:0 24px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes g47-up{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

/* g47.1 item 1: /contact/ portraits at the size used on Over ons and Vacatures (240 px), so "Naam — rol" fits on one line in its own
   caption and the two captions cannot touch (gate docs/g47/w/textlap.mjs) */
html body .g37-ct .g37-team{gap:28px}
html body .g37-ct .g37-pp{width:240px;flex:none}
html.g47-fw .g43-bl{visibility:hidden}   /* g47.1: a filtered /blog/ load shows the list once the filter is applied */