/* ===== Meterknot engine v1.0, shared additions (2026-10-07, MTKN-MC · Website Main Builder) ===== */
/* the drawn arrow (Sotiris 2026-10-07, 10:16 and 10:48): one 14-unit arrow for every icon arrow, 1em, the stroke near the
   label's stem; the type arrow stays only where the arrow is content (the proof figures, a sequence, a chart label) */
.mk-arw{display:inline-block;width:1em;height:1em;vertical-align:-0.14em;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;flex:none}
.arr>.mk-arw,.ch-ar>.mk-arw,.ih-ar>.mk-arw,.pi-arr>.mk-arw,.pl-ar>.mk-arw,.dopen>.mk-arw,.sx-open>.mk-arw{width:.85em;height:.85em;vertical-align:-0.08em}
/* in running text the arrow takes the type arrow's width (0.6em of the mono face), its tip drawn past it, so no line reflows */
.arr>.mk-arw,.ch-ar>.mk-arw,.ih-ar>.mk-arw,.pi-arr>.mk-arw,.dopen>.mk-arw,.sx-open>.mk-arw{margin-right:-.25em}
.mk-nw{white-space:nowrap}
/* the header's current state: the page's own item holds its hover underline, in white, without the hover's lime (R6) */
header nav .ni[aria-current],header nav .ni[aria-current] .ix{color:#fff}
header nav .ni[aria-current]::after{transform:scaleX(1);transform-origin:left center;background:#fff}
.mnav-list .mni[aria-current] .ix{color:#fff}
.mnav-list .mni[aria-current]{border-bottom-color:rgba(255,255,255,0.55)}
/* the skip link, first in the page; shown on keyboard focus only */
.mk-skip{position:fixed;left:16px;top:12px;z-index:1000;padding:10px 18px;border-radius:999px;background:#fff;color:var(--blue-900);font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.2;transform:translateY(-220%);transition:transform .2s var(--ease)}@media (min-width:2561px){.mk-skip{font-size:max(15px, min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px))}}
.mk-skip:focus,.mk-skip:focus-visible{transform:none;outline:2px solid #fff;outline-offset:3px}
main:focus{outline:none}
/* focus rings in the header, the phone menu and the footer: white, not lime */
header :focus-visible,#mnav :focus-visible,#foot :focus-visible{outline-color:#fff}
/* the header at 320 to 379 px: a smaller logo and a tighter toggle, so Menu keeps the 20 px gutter */
@media (max-width:379px){ .logo-main{height:30px} header .hwrap{gap:12px} .nav-toggle{padding:8px 12px 8px 14px;gap:8px;font-size:14px} }
@media (max-width:339px){ .logo-main{height:28px} }
/* the cursor ring, drawn at 60 px and scaled (the engine sets 32/60 at rest) */
#mk-cursor-ring{width:60px;height:60px;margin:-30px 0 0 -30px;border-width:1.875px}
/* the Home's instrument light: its blur follows the scale the engine sets (--lb), so the light looks as before */
#inst-light .lw,#inst-light .ll{filter:blur(var(--lb,3px))}
/* the Home's intro pre-state (html.mk-pre, set in the head; lifted by the engine once the intro has its start) */
.mk-pre [data-intro]{opacity:0}
/* Meterknot button v1 (2026-10-07): the one engine button. Applies only once mkbtn.js has drawn a button (data-mkb="1");
   without the script every button stays exactly as locked. */
.mkb { position: relative; isolation: isolate }
.mkb[data-mkb="1"], .mkb[data-mkb="1"]:hover { background: transparent !important; border-color: transparent !important }
.mkb-svg { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: -1; overflow: visible; pointer-events: none; visibility: hidden }
.mkb[data-mkb="1"] > .mkb-svg { visibility: visible } /* shown once drawn at its place, so it never counts as a layout shift */
.mkb-back { fill: var(--lime); transform: scale(.995); transform-origin: center; transform-box: fill-box }
.mkb-lime { fill: var(--lime); opacity: 0; transition: opacity .45s var(--ease) }
.mkb-line { fill: none; stroke: rgba(183,197,208,0.28); stroke-width: 1; transition: stroke .25s var(--ease) }
.mkb:hover .mkb-line { stroke: rgba(183,197,208,0.55) }
.btn-nav.mkb .mkb-line { stroke: rgba(183,197,208,0.32) }
.btn-nav.mkb:hover .mkb-line, .btn-quiet.mkb:hover .mkb-line { stroke: var(--blue-100) }
/* the label rolls: the line leaves upwards and its copy rises from below in lime (the live pill's slider; Sotiris 2026-10-07, 10:16: lime) */
.mkb-roll { display: inline-grid; overflow: hidden; vertical-align: top }
.mkb-t { grid-area: 1 / 1; transition: transform .55s cubic-bezier(.33,1,.68,1), opacity .4s, color .3s }
.mkb-t2 { transform: translateY(110%); opacity: 0 }
.mkb-t2::before { content: attr(data-t) } /* the copy is generated text: find-in-page and copying meet the label once */
.mkb:hover .mkb-t:not(.mkb-t2), .mkb:focus-visible .mkb-t:not(.mkb-t2) { transform: translateY(-110%); opacity: 0 }
.mkb:hover .mkb-t2, .mkb:focus-visible .mkb-t2 { transform: none; opacity: 1; color: var(--lime) }
/* the chip (lime at rest, R2): a drawn arrow, 1em on a 14-unit grid, its stroke close to the label's stem.
   Hover and focus (after Next Bricks Arrow Button v5): the arrow leaves to the right, a new one arrives from the left 0.12 s later,
   each with two fading copies 20 ms behind it; on leave the two run back. The copies are invisible at rest, so the arrow stays crisp. */
.mkb .chip { position: relative; overflow: hidden; --mkb-d: 1.75em; --mkb-e: cubic-bezier(.32,.72,0,1) }
.mkb:hover .chip { transform: none }
.mkb-a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none }
.mkb-arw { display: block; width: 1em; height: 1em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round }
.mkb-out { transition: transform .6s var(--mkb-e), opacity .2s ease-out .05s }
.mkb-in { transform: translateX(calc(var(--mkb-d) * -1)); opacity: 0; transition: transform .6s var(--mkb-e), opacity .2s ease-out }
.mkb-g { opacity: 0; transition: none }
.mkb:hover .mkb-out:not(.mkb-g), .mkb:focus-visible .mkb-out:not(.mkb-g) { transform: translateX(var(--mkb-d)); opacity: 0; transition-delay: 0s, .08s }
.mkb:hover .mkb-in:not(.mkb-g), .mkb:focus-visible .mkb-in:not(.mkb-g) { transform: none; opacity: 1; transition-delay: .12s, .12s }
.mkb:hover .mkb-out.mkb-g1, .mkb:focus-visible .mkb-out.mkb-g1 { animation: mkbGo .6s var(--mkb-e) .02s }
.mkb:hover .mkb-out.mkb-g2, .mkb:focus-visible .mkb-out.mkb-g2 { animation: mkbGo .6s var(--mkb-e) .04s }
.mkb:hover .mkb-in.mkb-g1, .mkb:focus-visible .mkb-in.mkb-g1 { animation: mkbGi .6s var(--mkb-e) .14s }
.mkb:hover .mkb-in.mkb-g2, .mkb:focus-visible .mkb-in.mkb-g2 { animation: mkbGi .6s var(--mkb-e) .16s }
.mkb-g2 { --mkb-o: .22 } .mkb-g1 { --mkb-o: .42 }
@keyframes mkbGo { 0% { transform: none; opacity: var(--mkb-o) } 35% { opacity: 0 } 100% { transform: translateX(var(--mkb-d)); opacity: 0 } }
@keyframes mkbGi { 0% { transform: translateX(calc(var(--mkb-d) * -1)); opacity: 0 } 8% { opacity: var(--mkb-o) } 60% { opacity: 0 } 100% { transform: none; opacity: 0 } }
/* the header pill's dot (after Next Bricks Arrow Button v8): the 8 px dot is a 22 px lime circle drawn at 8/22 scale; on hover and
   focus it grows to full size, a navy arrow slides in from the left and the label steps 6 px right to keep its distance */
.mkb .dot { position: relative }
.mkb[data-mkb="1"] .dot { background: transparent; overflow: visible }
.mkb-dc { visibility: hidden } .mkb[data-mkb="1"] .mkb-dc { visibility: visible } /* never drawn before its button is */
.mkb-dc { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--lime); color: var(--blue-900); overflow: hidden; display: flex; align-items: center; justify-content: center; transform: scale(.3636); transition: transform .6s cubic-bezier(.33,1,.68,1) }
.mkb-dc .mkb-arw { width: 12px; height: 12px; stroke-width: 2.1; transform: translateX(-22px); transition: transform .6s cubic-bezier(.33,1,.68,1) }
.mkb:hover .mkb-dc, .mkb:focus-visible .mkb-dc, .mkb:hover .mkb-dc .mkb-arw, .mkb:focus-visible .mkb-dc .mkb-arw { transform: none }
.btn-nav.mkb .mkb-roll { transition: transform .6s cubic-bezier(.33,1,.68,1) }
.btn-nav.mkb:hover .mkb-roll, .btn-nav.mkb:focus-visible .mkb-roll { transform: translateX(6px) }
/* press */
.mkb:active { transform: translateY(0) scale(.985) }
/* keyboard focus: a white ring (the joint pass rule), and the wave runs once */
.mkb:focus-visible { outline: 2px solid #fff; outline-offset: 3px }
/* a complete form: the pill fills lime (R2); the chip turns navy with a lime arrow, the label navy */
.cm-form.valid .mkb .mkb-lime, .rq-form.valid .mkb .mkb-lime { opacity: 1 }
.cm-form.valid .mkb .mkb-back, .rq-form.valid .mkb .mkb-back { fill: var(--blue-900) } /* the wave's edge on a lime pill: navy, the inverse of the rest state */
.cm-form.valid .mkb .mkb-line, .rq-form.valid .mkb .mkb-line { stroke: transparent }
.cm-form.valid .mkb, .rq-form.valid .mkb { color: var(--blue-900) }
.cm-form.valid .mkb .chip, .rq-form.valid .mkb .chip { background: var(--blue-900) !important; color: var(--lime) }
.cm-form.valid .mkb .mkb-t2, .rq-form.valid .mkb .mkb-t2 { color: var(--blue-900) }
/* sending: the wave loops instead of the chip spinning */
.mkb[aria-busy="true"] .chip { animation: none !important }
.mkb[aria-busy="true"] { opacity: 1 !important } /* the looping wave says "sending"; the locked dimming turned the lime pill olive */
/* touch: no hover roll (the wave runs on the tap) */
@media (hover: none) { .mkb-t2 { display: none } .mkb:hover .mkb-t:not(.mkb-t2), .mkb:focus-visible .mkb-t:not(.mkb-t2) { transform: none; opacity: 1 } } /* touch with a keyboard: the label stays */
@media (prefers-reduced-motion: reduce) { .mkb-t { transition: none } .mkb:hover .mkb-t:not(.mkb-t2), .mkb:focus-visible .mkb-t:not(.mkb-t2) { transform: none; opacity: 1 } .mkb:hover .mkb-t2, .mkb:focus-visible .mkb-t2 { opacity: 0 } .mkb-lime { transition: none }
  .mkb-a, .mkb-dc, .mkb-dc .mkb-arw, .btn-nav.mkb .mkb-roll { transition: none !important; animation: none !important }
  .mkb:hover .mkb-out:not(.mkb-g), .mkb:focus-visible .mkb-out:not(.mkb-g) { transform: none; opacity: 1 }
  .mkb:hover .mkb-in:not(.mkb-g), .mkb:focus-visible .mkb-in:not(.mkb-g) { opacity: 0 }
  .btn-nav.mkb:hover .mkb-roll, .btn-nav.mkb:focus-visible .mkb-roll { transform: none } }

/* B8 (2026-10-10, ruled "option A 10%"): from 2560 px wide, text under 16 px 10% larger; each line repeats a rule above with its own context */
@media (min-width:2560px){.mk-skip{font-size:calc(15px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){.mk-skip{font-size:calc(max(15px, min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}