/* The financing window at phone width: what version D's stack needs on these
 * four routes that site/phone-stack.css and site/phone-kit.css do not already
 * give it.
 *
 * Two scopes hold every rule here, the same two that hold the kit:
 *
 *   @media (max-width: 860px)        site/header.css's own phone breakpoint.
 *   html[data-phone='stack']
 *        [data-phone-kit='on']       written by site/phone-financing.js only
 *                                    after the cut has run. Above the
 *                                    breakpoint neither exists, so not one
 *                                    declaration below can match and the desk
 *                                    page is exactly what master serves.
 *
 * The file does three jobs and nothing else. It restates no shared rule: the
 * stack's precedence and site/sheet.css's 100vh floor are kit round three's,
 * centrally.
 *
 *   1. It names the two state colours the phone lead form refuses to invent.
 *      site/phone-kit.js stops the page unless the route's own family has
 *      declared --resurs-invalid / --resurs-saved, and the financing family
 *      declares the same two hues under its own names in
 *      site/financing.tokens.css. So they are mapped, never restated: no
 *      literal enters this file, and a palette swap still carries them.
 *   2. It stands the desk window down. site/financing.css dresses .row,
 *      .rows, .steps, .prose, .crumb, .band and .card-link for a 1291px page,
 *      and the mock this lane is judged against never loads that file. Every
 *      declaration in this section exists because a measured property differed
 *      from the mock's, and each one says which.
 *   3. It gives D's vocabulary the three words the mock's own screen used that
 *      the kit did not port - .after-kicker, .showcase-head, .row-status - and
 *      dresses the two live components D never drew, the calculator and the
 *      calendar, in that same vocabulary.
 */

/* --- 1. the two names the phone lead form asks this family for ----------- */
/* site/financing.tokens.css calls them danger and success; the phone kit asks
 * for invalid and saved. One hue, two names, and the naming is worth a line in
 * the report rather than a second colour. */
:root {
  --resurs-invalid:      var(--resurs-danger);
  --resurs-invalid-soft: var(--resurs-danger-soft);
  --resurs-saved:        var(--resurs-success);
  --resurs-saved-soft:   var(--resurs-success-soft);
}

@media (max-width: 860px) {
  /* --- 2. the desk window stands down ----------------------------------- */
  /* <main> is the stack now: site/sheet.css's own sheet - its ground, its
     radius, its lift and its top padding - belongs to the sheets inside it. */
  html[data-phone='stack'][data-phone-kit='on'] main.stack {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* site/financing.css gives .crumb a bottom margin and .rows and .row a desk
     geometry; site/phone-stack.css declares the sizes but not the spacing
     those rules add. Each line is one property measured against the mock. */
  html[data-phone='stack'][data-phone-kit='on'] .sheet .crumb { margin: 0; }
  html[data-phone='stack'][data-phone-kit='on'] .sheet .rows { padding: 0; list-style: none; }
  html[data-phone='stack'][data-phone-kit='on'] .sheet .rows-head { display: none; }
  html[data-phone='stack'][data-phone-kit='on'] .sheet .row { border: 0; }
  /* .prose is a column of paragraphs on the desk (site/financing.css:66) and a
     single paragraph in a sheet: the grid and its 14px gap are the desk's. */
  html[data-phone='stack'][data-phone-kit='on'] .sheet .prose {
    display: block; gap: normal; max-width: none;
  }
  /* The lead form's status line: the desk gives it a top margin and paints it
     even at rest (site/financing.css:234). In the stack the form's own grid
     spaces it, and it takes colour only in a state. */
  html[data-phone='stack'][data-phone-kit='on'] .sheet .lead-summary {
    margin: 0; background: none; color: inherit;
  }

  /* KIT-REQUEST 4 (raised here) - a separate defect from 1+2, and not a
     precedence one: site/phone-stack.css's .steps is not D's .steps. The port
     gives the numeral a 44px plate and the row a 64px floor - the dossier's
     step ROW - where mobile-d.css:246-267 sets a 2ch inline numeral and a 48px
     row, the pipeline's chips. /financing/cfa/ is the only screen D draws
     .steps on and it is this lane's fidelity pair, so D's geometry is restated
     here over the kit's until the kit decides which of the two the site wants. */
  html[data-phone='stack'][data-phone-kit='on'] .sheet .steps {
    margin-top: 14px; display: grid; gap: 8px; padding: 0; list-style: none;
    grid-auto-flow: row; grid-template-columns: 1fr;
  }
  html[data-phone='stack'][data-phone-kit='on'] .sheet .steps li {
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 10px 14px;
    font-weight: 500; line-height: normal;
  }
  html[data-phone='stack'][data-phone-kit='on'] .sheet .steps li::before {
    display: inline; place-items: initial;
    width: 2ch; height: auto; margin: 0; border-radius: 0;
    font-size: var(--resurs-size-small); font-weight: 400;
  }

  /* --- 3. the three words the mock used and the kit did not port --------- */
  /* A region that follows a kicker: the gap is the row list's own, so the
     wrapper is a box with no geometry of its own - as it was in the mock. */
  html[data-phone='stack'][data-phone-kit='on'] .after-kicker { display: block; }
  /* The «Образец данных» badge, on its own line under the heading. */
  html[data-phone='stack'][data-phone-kit='on'] .showcase-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-top: 8px;
  }
  /* A row's status, as a pill at its right edge. */
  html[data-phone='stack'][data-phone-kit='on'] .row-status {
    flex: none;
    padding: 4px 12px;
    border-radius: var(--resurs-radius-pill);
    background: var(--resurs-ground);
    font-size: var(--resurs-size-small);
    white-space: nowrap;
  }

  /* --- the calculator, in D's vocabulary -------------------------------- */
  /* The one component in this family that answers rather than states. Its
     fields are already the phone's (site/phone-kit.css dresses .field), so
     what is left is the shape around them: one column, the answer as the
     tinted band D gives to the one thing that stands above the rows. */
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator {
    display: grid;
    gap: var(--resurs-m-gap);
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .calc-form {
    display: grid; gap: 16px; margin: 0; padding: 0; border: 0; background: none;
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .calc-field {
    display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0;
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .field-label,
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator legend {
    padding: 0;
    font-size: var(--resurs-size-small);
    color: var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator input[type='number'],
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator select {
    width: 100%;
    min-height: var(--resurs-p-field-height);
    padding: 12px 16px;
    border: 1px solid var(--resurs-p-field-edge);
    border-radius: var(--resurs-radius-tile);
    background: var(--resurs-p-field-ground);
    color: var(--resurs-ink);
    font: inherit;
    font-size: var(--resurs-size-body);
  }
  /* The two choices as full-height rows: a radio and its word are one target,
     and 44px is the floor the gate holds every control to. */
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .choices {
    display: grid; grid-auto-flow: column; gap: 8px;
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .choice {
    display: flex; align-items: center; gap: 10px;
    min-height: var(--resurs-p-field-height);
    padding: 0 14px;
    border: 1px solid var(--resurs-p-field-edge);
    border-radius: var(--resurs-radius-tile);
    background: var(--resurs-p-field-ground);
    font-size: var(--resurs-size-body);
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .choice input {
    width: 20px; height: 20px; margin: 0; accent-color: var(--resurs-accent); flex: none;
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .calc-result {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 20px 18px;
    border: 0;
    border-radius: var(--resurs-radius-panel);
    background: var(--resurs-tint);
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .calc-result-title {
    font-size: var(--resurs-size-title); font-weight: 500; line-height: 1.12;
    letter-spacing: -0.02em;
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .calc-lines {
    display: grid; gap: 10px; margin: 0; padding: 0; list-style: none;
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .calc-lines li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: var(--resurs-size-small); line-height: 1.45;
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .calc-lines svg { flex: none; }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .calc-message,
  html[data-phone='stack'][data-phone-kit='on'] .phone-calculator .calc-next {
    font-size: var(--resurs-size-small); line-height: 1.45; color: var(--resurs-ink-muted);
  }

  /* --- the calendar: a labelled placeholder, never a date ---------------- */
  html[data-phone='stack'][data-phone-kit='on'] .phone-calendar {
    display: grid; gap: 10px;
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calendar .cal-week,
  html[data-phone='stack'][data-phone-kit='on'] .phone-calendar .cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0; padding: 0;
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calendar .cal-week {
    font-size: var(--resurs-size-small); color: var(--resurs-ink-muted); text-align: center;
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calendar .cal-cell {
    aspect-ratio: 1; border-radius: 8px; background: var(--resurs-surface);
  }
  html[data-phone='stack'][data-phone-kit='on'] .phone-calendar .cal-caption {
    margin: 0; font-size: var(--resurs-size-small); line-height: 1.45;
  }
}