/* ==========================================================================
   The viewing request - components/c-lead-form.tpl, the dialog behind
   «Пишете ни» on the offer page (docs/known-issues.md #89, closed).

   Loaded by the one page type that draws it (head.tpl, `property`), the way
   map.css is loaded only by the two that draw a map.

   Every number below is read off siteassets/frames/Property Page Schedule
   Form.png (673x862) or its 380-wide mobile twin. The frame was supplied
   directly rather than exported from Figma, so there is no node geometry
   behind it: each value is a pixel run on the render, and the ones worth
   checking say where they came from. The dialog itself spans x10..662 of
   the desktop frame (the rest is shadow bleed), so "dialog x" below is
   frame x minus 10.

     heading     20px Playfair 500, one line at 1920 - «…потвърждение» inks
                 473 against 470.2 at 500 (465.1 at 400, 475.3 at 600)
     contacts    three fields 199 + 8 + 199 + 8 + 199 = 613, the content column
     calendar    318 x 308, 2px gold, 16 radius; seven 40px days on a 41 pitch
     time        two columns of five 122x35 slots, 10 across and 7 down
     message     613 x 114
     submit      125 x 50, right-aligned

   The layout switches on the FORM'S OWN width, not the viewport's: the dialog
   is capped at 653 and sits inside a gutter, so "is there room for the
   calendar beside the times" is a question about the 613 column (318 + 15 +
   254 = 587), and a container query asks exactly that.
   ========================================================================== */

/* --- the dialog -------------------------------------------------------- */

/* The <dialog> is only the scroll box and the top layer; the card inside it
   is a .c-form, so the warm cream, the 2px gold ::before and the form-card
   shadow are the system's own and c-form.js finds its success slot where it
   finds it on every other form. */
.c-lead{
  /* 653 of card inside 12px of transparent room on every side - the scroll
     box would otherwise clip the card's shadow flush. At 393 the card is the
     mobile frame's 361: the page gutter each side, as everywhere else. */
  width:calc(min(653px, 100% - 2 * var(--c-page-gutter)) + 24px);
  max-width:none;
  max-height:calc(100dvh - 2 * var(--c-page-gutter) + 24px);
  margin:auto;
  padding:12px;
  border:0;
  background:transparent;
  color:var(--c-ink);
  overflow:auto;
  overscroll-behavior:contain;
}

/* Soft Ink, not black - the system has no #000 anywhere, and the scrim is
   the largest area of colour the page will ever show. */
.c-lead::backdrop{ background:rgba(28,28,28,.55); }

/* The page behind a modal does not scroll. js1/c-lead-form.js pads the root
   by the scrollbar's width while this holds, so nothing shifts sideways. */
html:has(.c-lead[open]){ overflow:hidden; }

/* ONE authored moment: the card rises 12px into place as the scrim fades in.
   Exponential ease-out, from a state that is already almost there. */
.c-lead[open]{ animation:c-lead-in .34s cubic-bezier(.16, 1, .3, 1); }
.c-lead[open]::backdrop{ animation:c-lead-fade .34s ease-out; }
@keyframes c-lead-in{ from{ opacity:0; transform:translateY(12px); } }
@keyframes c-lead-fade{ from{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .c-lead[open], .c-lead[open]::backdrop{ animation:none; }
}

/* WITHOUT JAVASCRIPT the dialog is never opened - «Пишете ни» is a link to
   its fragment and this is what answers it. A closed <dialog> is
   display:none by the UA's own sheet, and (0,2,0) outranks it. A non-modal
   dialog has no ::backdrop, so here the dialog IS the scrim - the whole
   viewport, scrolling - and the card sits centred inside it. */
.c-lead:target:not([open]){
  display:block;
  position:fixed;
  inset:0;
  z-index:1000;
  width:auto;
  height:auto;
  max-height:none;
  margin:0;
  padding:var(--c-page-gutter);
  background:rgba(28,28,28,.55);
}
.c-lead:target:not([open]) .c-lead__card{
  max-width:653px;
  margin-inline:auto;
}
/* Following the fragment focuses the target, and base.css's :focus-visible
   ring would then draw round the whole dialog. The dialog is not a control;
   everything inside it that is keeps its own ring. */
.c-lead:focus-visible{ outline:none; }

/* --- the card ---------------------------------------------------------- */

/* 29 / 20 / 39. The sides are the content column's own: fields open at
   dialog x20 and the submit ends at 632 of 653. The top puts the heading's
   baseline where the frame inks it (y57, 51 below the dialog's edge) on a
   29px line; the bottom is the frame's 39 under the submit. */
.c-lead .c-lead__card{
  /* forms.css caps every .c-form at 462 below 1120 and 324 below 640 - the
     contact and CV cards' page widths. This card's width is the dialog's. */
  width:auto;
  max-width:none;
  margin:0;
  padding:29px 20px 39px;
}
/* the mobile frame closes 19 under the submit, where the desktop's is 39 */
@media (max-width: 639px){
  .c-lead .c-lead__card{ padding-bottom:20px; }
}

.c-lead__title{
  margin:0 0 35px;
  /* clear of the close control, which owns the card's top-right 54px */
  padding-right:40px;
  font:500 20px/29px var(--c-serif);
  color:var(--c-ink);
  text-wrap:balance;
}
.c-lead__title:focus{ outline:none; }

/* The frame's X inks 14x14 at dialog x612..625, y25..38. The control around
   it is 40 square so the target clears 24 with room to spare. */
.c-lead__close{
  position:absolute;
  top:11px;
  right:14px;
  z-index:1;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:var(--c-r-control);
  background:none;
  color:var(--c-ink);
  cursor:pointer;
  transition:color var(--c-ease), background var(--c-ease);
}
.c-lead__close:hover{ color:var(--c-green); background:var(--c-cream); }
.c-lead__close svg{ width:24px; height:24px; }

/* The success line sits where the form was; the card keeps its heading. */
.c-lead .c-form__done{ margin:0; }

/* --- groups ------------------------------------------------------------ */

.c-lead fieldset{ margin:0; padding:0; border:0; min-width:0; }
.c-lead legend{ padding:0; }

/* «Вашите контакти» -> the three fields: 28 from label top to field top,
   the system's own. The row under it opens 12 below the fields. */
.c-lead__group{ margin-bottom:12px; }
.c-lead__contacts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

/* The day beside the hour. Both labels ink their cap at y182 and both
   controls open at y209: 30 from label top, i.e. 14 under a 16px label box -
   the one place this card is 2 looser than the system's 12. */
.c-lead__when{
  display:grid;
  grid-template-columns:318px minmax(0, 1fr);
  column-gap:15px;
  align-items:start;
}
.c-lead__when legend.c-field__label{ margin-bottom:14px; }

/* «13/09/2026» - bold italic in the frame, the only italic outside a
   placeholder in the card. Until a day is chosen it is a muted prompt. */
.c-lead__picked{ font-style:italic; font-weight:700; }
.c-lead__picked.is-empty{ font-weight:400; color:var(--c-muted); }

/* the calendar ends 516, «Вашето запитване» caps at 536: a 17 gap */
.c-lead__message{ margin-top:17px; }
.c-lead__message textarea.c-field__control{ height:114px; min-height:114px; }

/* textarea ends 675; the first box opens 688, the second 739 */
.c-lead__checks{
  display:grid;
  row-gap:23px;
  margin-top:13px;
}

/* the submit opens 759, 8 under the second consent line - it is right-aligned
   and the line ends at x461, so the two never meet */
.c-lead .c-form__actions{ margin-top:8px; }

/* --- the calendar ------------------------------------------------------ */

.c-cal{
  padding:17px 14px 13px;
  background:var(--c-cream);
  border:2px solid var(--c-gold);
  border-radius:var(--c-r-surface);
}

/* The chevrons sit over the first and last columns (their ink centres on
   dialog x54 and x303, the days' on 56 and 302); the month between them is a
   184x30 box with a 2px hairline - #eae9e8 on the frame, which is Soft Ink at
   8% over Paper Cream rather than a sixth neutral. */
.c-cal__head:not([hidden]){
  display:grid;
  grid-template-columns:40px minmax(0, 1fr) 40px;
  align-items:center;
  gap:1px;
  height:30px;
  margin-bottom:18px;
}
.c-cal__nav{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:var(--c-r-control);
  background:none;
  color:var(--c-ink);
  cursor:pointer;
  transition:background var(--c-ease), color var(--c-ease);
}
.c-cal__nav svg{ width:24px; height:24px; }
.c-cal__nav:hover:not([disabled]){ background:var(--c-cream-warm); }
.c-cal__nav[disabled]{ opacity:.3; cursor:default; }

.c-cal__label{
  justify-self:center;
  width:min(184px, 100%);
  height:30px;
  margin:0;
  padding:0 8px;
  border:2px solid rgba(28,28,28,.08);
  border-radius:var(--c-r-control);
  font:400 var(--c-fs-body)/26px var(--c-sans);
  color:var(--c-ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Without the script every month is drawn, each under its own caption; with
   it, one month at a time and the caption is the head's box instead. */
.c-cal__caption{
  margin:0 0 12px;
  font:400 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
}
.c-cal__month + .c-cal__month{ margin-top:20px; }
.c-cal--paged .c-cal__caption{ display:none; }
.c-cal--paged .c-cal__month:not(.is-current){ display:none; }
.c-cal--paged .c-cal__month + .c-cal__month{ margin-top:0; }

/* seven 40px columns on a 41 pitch: 286, inside the 314 between the strokes */
.c-cal__grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 40px));
  justify-content:center;
  gap:1px;
}

.c-cal__wd{
  height:20px;
  font:400 var(--c-fs-caption)/20px var(--c-sans);
  color:var(--c-muted);
  text-align:center;
}

.c-cal__day{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  border-radius:var(--c-r-control);
  font:400 var(--c-fs-body)/1 var(--c-sans);
  color:var(--c-ink);
  transition:background var(--c-ease), color var(--c-ease);
}
/* The weekend is bold - the frame's 6th and 7th columns - on the month's own
   days only; the next month's fillers are all one weight. */
.c-cal__day--we:not(.c-cal__day--next){ font-weight:700; }

/* Unavailable: before tomorrow, past the window, or the next month's fillers.
   Soft Ink thinned toward the card rather than a grey of its own; an inactive
   control is outside the contrast rule and should read as one. */
.c-cal__day--past,
.c-cal__day--after,
.c-cal__day--next,
.c-cal__day--today{ color:rgba(28,28,28,.38); }

/* Today is marked, not offered - the frame's outlined «9». */
.c-cal__day--today{ box-shadow:inset 0 0 0 1px var(--c-green); }

/* The radio covers the whole day, so the day is the hit area and the input
   is still a real, focusable, announced control. */
.c-cal__input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.c-cal__day:has(.c-cal__input):hover{ background:var(--c-cream-warm); }
.c-cal__day:has(.c-cal__input:checked){
  background:var(--c-green);
  color:var(--c-white);
}
.c-cal__day:has(.c-cal__input:focus-visible){
  outline:2px solid var(--c-green);
  outline-offset:2px;
}

.c-lead__date.c-field--error .c-cal{ border-color:var(--c-error); }

/* --- the time slots ---------------------------------------------------- */

/* Column-major, the way the frame reads: 09..13 down the left, 14..18 down
   the right. Chosen is Estate Green, the same fill as the chosen day - the
   frame draws the day that way and the hour is the other half of one
   answer, so the two must look like one. It is the only place a chosen
   option is green rather than gold, and DESIGN.md records why. */
.c-slots{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 122px));
  grid-template-rows:repeat(5, 35px);
  grid-auto-flow:column;
  column-gap:10px;
  row-gap:7px;
}
.c-slots__opt{ position:relative; display:flex; }
.c-slots__input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.c-slots__label{
  display:grid;
  place-items:center;
  width:100%;
  background:var(--c-field);
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-control);
  font:400 var(--c-fs-body)/1 var(--c-sans);
  color:var(--c-ink);
  cursor:pointer;
  transition:background var(--c-ease), color var(--c-ease), border-color var(--c-ease);
}
.c-slots__opt:hover .c-slots__label{ background:var(--c-cream-warm); }
.c-slots__input:checked + .c-slots__label{
  background:var(--c-green);
  border-color:var(--c-green);
  color:var(--c-white);
}
.c-slots__input:focus-visible + .c-slots__label{
  outline:2px solid var(--c-green);
  outline-offset:2px;
}
.c-lead__time.c-field--error .c-slots__label{ border-color:var(--c-error); }

/* --- the narrow column ------------------------------------------------- */

.c-lead__form{ container-type:inline-size; }

/* Below the 587 the calendar and the times need side by side - which is the
   mobile frame's layout from a 393 phone up to a 640 tablet in portrait. */
@container (max-width: 586px){
  .c-lead__contacts{ grid-template-columns:minmax(0, 1fr); }

  .c-lead__when{ display:block; }
  .c-lead__time{ margin-top:13px; }
  /* the mobile frame centres the two columns of times under the calendar */
  .c-slots{ justify-content:center; }
}

/* At 320 the calendar's own padding is what gives: 14 per side is a tenth
   of the column there. */
@container (max-width: 300px){
  .c-cal{ padding-inline:6px; }
  .c-slots{ column-gap:8px; }
}