/* ============================================================================
   jeanwwd — request form. The panel is the sibling of the menu panel (kit.css):
   same edge, width (--menu-w), ground (--surface-2), close button (.round--ink),
   curve and duration (--t-menu, --ease-inout), same row entrance (.panel-row).
   Rows read like menu items: a grey number, then one idea in large 400 type.
   Only tokens; black and white only; errors are a sign and words, never a colour.
   The same markup sits in the page flow on /contact/ (.lead--flow), no JS needed.
   ========================================================================== */

:root{
  --lead-pl:max(24px, calc(135 * var(--u)));   /* = the menu's left padding: numbers stand on the same vertical */
  --lead-pr:var(--m-page);                     /* the page margin, narrower than the menu's 150u: a form needs the width for typing */
  --lead-n:max(28px, calc(38 * var(--u)));     /* number column */
  --fs-lead-q:var(--fs-h2);                    /* a row's line: 56u, the menu's tracking */
}

/* --- layer, scrim, panel ------------------------------------------------------ */
.lead-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:21}
.lead-scrim{position:absolute;inset:0;background:#111;opacity:0;transition:opacity var(--t-menu) var(--ease-inout)}
.lead-open .lead-layer{pointer-events:auto}
.lead-open .lead-scrim{opacity:.5}
.lead{position:absolute;top:0;right:0;bottom:0;width:var(--menu-w);max-width:100%;background:var(--surface-2);color:var(--ink);transform:translateX(105%);visibility:hidden;transition:transform var(--t-menu) var(--ease-inout),visibility 0s linear var(--t-menu);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;outline:0}
.lead::-webkit-scrollbar{display:none}
.lead-open .lead{transform:none;visibility:visible;transition-delay:0s}
.lead__close{position:fixed;top:var(--s-3);right:var(--s-3);z-index:2}   /* fixed inside a transformed panel = pinned to the panel, not to the scroll */
.lead__title{position:absolute;top:var(--s-3);left:var(--lead-pl);height:var(--round);display:flex;align-items:center;font-size:var(--fs-ui);font-weight:var(--fw-ui);line-height:1}
.lead__in{margin:auto 0;padding:calc(var(--round) + var(--s-3) + var(--s-4)) var(--lead-pr) max(24px, calc(50 * var(--u))) var(--lead-pl)}
html.lead-lock{overflow:hidden}              /* pages without Lenis (reduced motion, the WebGL works page) */

/* --- rows --------------------------------------------------------------------- */
.lead__form{display:flex;flex-direction:column;gap:var(--s-4)}
.lead__row{display:flex;align-items:flex-start;gap:0}
.lead__n{flex:0 0 var(--lead-n);font-size:var(--fs-caption);line-height:1;color:var(--ink-2);padding-top:calc(var(--fs-lead-q) * .17)}
.lead__cell{flex:1 1 0;min-width:0}
.lead__q{font-size:var(--fs-lead-q);line-height:1.1;letter-spacing:-.035em;font-weight:400}
.lead__q + .pills{margin-top:var(--s-2)}

/* pills of the kit over real inputs; a wrapped clip keeps the pill radius instead of turning into a blob */
.pills--wrap{border-radius:calc(var(--pill-h) / 2 + var(--pill-inset));margin-left:calc(-1 * var(--pill-inset))}
.pillbox{display:inline-flex;position:relative;cursor:pointer}
.pillbox input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.pillbox input:checked + .pill,.pillbox input:checked + .pill:hover{background:var(--ink);color:var(--ground)}
.pillbox input:focus-visible + .pill{outline:2px solid var(--focus);outline-offset:2px}
.pillbox:hover input:not(:checked) + .pill{background:color-mix(in srgb, var(--pill-bg) 60%, var(--ground))}

/* field: a rule instead of a box; the row's big line is the label and becomes a small caption above the typing */
.field{position:relative;padding-top:calc(var(--fs-caption) * 1.5);border-bottom:var(--rule-w) solid var(--rule);transition:box-shadow var(--t-fast) var(--ease-out)}
.field input,.field textarea{display:block;width:100%;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:var(--fs-lead);line-height:1.3;letter-spacing:var(--ls-lead);padding:0 0 calc(var(--fs-lead-q) * 1.1 - var(--fs-lead) * 1.3 - var(--fs-caption) * .5 + var(--s-1));min-height:calc(var(--fs-lead-q) * 1.1 - var(--fs-caption) * .5 + var(--s-1));border-radius:0;appearance:none;-webkit-appearance:none;resize:none}
.field textarea{overflow-y:auto;field-sizing:content;max-height:40vh}
.field label{position:absolute;left:0;top:calc(var(--fs-caption) * 1);font-size:var(--fs-lead-q);line-height:1.1;letter-spacing:-.035em;color:var(--ink);pointer-events:none;white-space:nowrap;transition:font-size var(--t-base) var(--ease-out),top var(--t-base) var(--ease-out),letter-spacing var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out)}
.field:focus-within label,.field :not(:placeholder-shown) ~ label{top:0;font-size:var(--fs-caption);line-height:1.2;letter-spacing:0;color:var(--ink-2)}
.field:focus-within{box-shadow:0 var(--rule-w) 0 var(--rule)}                     /* the rule doubles: focus without a colour */
.field:has([aria-invalid="true"]){box-shadow:0 var(--rule-w) 0 var(--rule)}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 100px var(--surface-2) inset}

/* error: a sign and words under the field */
.field__err{display:flex;align-items:flex-start;gap:.5em;margin-top:var(--s-1);font-size:var(--fs-caption);line-height:1.33;color:var(--ink)}
.field__err:empty{display:none}
.field__err .ico{margin-top:.12em}

/* send row */
.lead__send{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-1);padding-left:var(--lead-n)}
.lead__note{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-2);max-width:26em}
.lead__form[aria-busy="true"] button[type="submit"]{opacity:.5;pointer-events:none}
.lead__status{font-size:var(--fs-caption);line-height:1.33;padding-left:var(--lead-n)}
.lead__status:empty{display:none}
.lead__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* states after sending: one big line (menu size), one sentence, one button */
.lead__state{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.lead__big{font-size:var(--fs-menu);line-height:1.1;letter-spacing:-.035em;font-weight:400;outline:0}
.lead__state .t-lead{max-width:18em}
.lead__actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.lead__state > .btn{margin-top:var(--s-2)}
.lead__state.is-in > *{animation:lead-in var(--t-slow) var(--ease-out) both}
.lead__state.is-in > :nth-child(2){animation-delay:var(--stagger)}
.lead__state.is-in > :nth-child(3){animation-delay:calc(var(--stagger) * 2)}
@keyframes lead-in{from{opacity:0;transform:translateY(var(--panel-row-y))}}

/* --- /contact/: the same form in the page flow ---------------------------------- */
.contact-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,calc(700 * var(--u)));column-gap:var(--gutter);align-items:start;width:min(var(--container), calc(100% - 2 * var(--m-page)));margin:0 auto;padding:calc(var(--nav-h) + var(--s-6)) 0 var(--s-7)}
.contact-page__head{position:sticky;top:calc(var(--nav-h) + var(--s-6))}
.contact-page__head .contacts{margin-top:var(--s-4)}
.contact-page__foot{padding:0 var(--m-page)}
.contact-page__foot .foot{padding-left:calc(var(--round) + var(--s-3))}
.lead--flow{position:static;width:auto;transform:none;visibility:visible;background:transparent;overflow:visible;display:block;transition:none}
.lead--flow .panel-row{opacity:1;transform:none}

@media (max-width:900px){
  :root{--lead-pl:var(--m-page);--lead-pr:var(--m-page)}
  .lead{height:var(--lead-vh, 100dvh);bottom:auto}
  .lead__in{margin:0;padding-bottom:max(32px, env(safe-area-inset-bottom))}
  .lead__send{flex-direction:column;align-items:flex-start;padding-left:var(--lead-n)}
  .field input,.field textarea{scroll-margin-block:96px}
  .contact-page{grid-template-columns:1fr;row-gap:var(--s-5);padding-top:calc(var(--nav-h) + var(--s-4))}
  .contact-page__head{position:static}
  .contact-page__foot .foot{flex-direction:column;align-items:flex-start;padding-left:0;padding-bottom:calc(var(--round) + 32px)}
}
@media (prefers-reduced-motion:reduce){
  .lead__state.is-in > *{animation:none}
}

/* 2026-09-19, Jean: the request panel takes the whole screen on desktop, not a side strip.
   Composition = our /contact/ page: large statement at left, the form column at right. Phone unchanged. */
@media (min-width:901px){
  .lead{width:100%}
  .lead__in{width:min(var(--container), calc(100% - 2 * var(--m-page)));margin:0 auto;padding-left:0;padding-right:0;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,calc(900 * var(--u)));column-gap:var(--gutter);align-items:start}
  .lead__in > *{grid-column:2}
  .lead__title{top:auto;left:max(var(--m-page), calc((100% - var(--container)) / 2));height:auto;display:block;
    margin-top:calc(var(--round) + var(--s-3) + var(--s-4));max-width:calc(440 * var(--u));
    font-size:var(--fs-h1);font-weight:var(--fw-heading);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
}