/* The seven form-and-document routes at phone width: what site/phone-stack.css
 * and site/phone-kit.css do not already say for /apply/, /contacts/,
 * /download/, /sitemap/, /privacy/, /nda/ and /404/.
 *
 * Every rule is inside the phone breakpoint AND under both of the layer's own
 * declarations - html[data-phone='stack'] (this page opted in) and
 * [data-phone-kit='on'] (the kit's chrome stands). Above 860px not one
 * selector here can match, so this file costs the desk page nothing: no rule,
 * no node, no measurement. That is what keeps tools/fidelity-diff.py at 1440
 * on these seven routes at zero.
 *
 * It adds no colour, no radius and no duration of its own. Everything below
 * resolves through design/tokens.css, design/palette.css and
 * site/phone.tokens.css, which is the same law every layer in this repo runs
 * under. */

/* The ONE rule outside the breakpoint, and it is here because what it closes
   is a DESK defect: a stack raised at 390 and then carried over 860px by a
   window being dragged. Under the media query below the desk page steps aside
   for the stack; above it nothing stepped back, and both pages stood on the
   screen at once - master's page and the phone's cut of it, one under the
   other. site/phone-screen.css states the same switch the same way for the
   ten routes it serves: the stack is hidden by DEFAULT and shown only where
   it is the page, so a width this file says nothing about cannot inherit it.

   It costs a desk visitor nothing. Nothing builds a .stack above 860px - the
   module returns and no node exists - so this selector matches only after a
   crossing, which is the only case there is anything to hide. */
html[data-phone-forms] body > main.stack { display: none; }

@media (max-width: 860px) {
  /* ...and at the phone width it is the page. `block` is the value a <main>
     already has: site/phone-stack.css declares position on .stack and no
     display, so this restores rather than decides. */
  html[data-phone='stack'][data-phone-kit='on'] body > main.stack { display: block; }

  /* The two form states, on the one route whose family names them otherwise.
   *
   * site/phone-kit.js will not invent a colour for an invalid field or a saved
   * form: it reads --resurs-invalid / --resurs-saved off the route and stops
   * the page when they are not there. Six of these seven load
   * site/chrome.tokens.css, which declares exactly those four names. /apply/
   * loads site/partners.tokens.css, which declares the SAME TWO STATES under
   * two other names - --resurs-error and --resurs-ok, with their soft pair -
   * and the desk form on that route is painted from them (site/partners.css).
   *
   * So this is not a colour: it is the one route's own two colours, reached by
   * the name the phone layer asks for. Nothing new is minted and no literal is
   * written; a palette swap carries it exactly as it carries the desk form.
   * The place this belongs is the shared layer, and the REPORT files it as
   * KIT-REQUEST: site/phone.tokens.css.
   *
   * Scoped to the screen, not to all seven: on the other six --resurs-invalid
   * is already the right colour and re-declaring it here would overwrite the
   * chrome family's own with a name that family does not carry. */
  html[data-phone-forms='apply'] {
    --resurs-invalid: var(--resurs-error);
    --resurs-invalid-soft: var(--resurs-error-soft);
    --resurs-saved: var(--resurs-ok);
    --resurs-saved-soft: var(--resurs-ok-soft);
  }

  /* The desk page is HIDDEN, never removed. tools/verify-site.py,
     tools/links-check.py and tools/routes-check.py walk the post-JS DOM and
     count what stands in it; removing the page would change those counts at
     390 and would leave nothing to restore for a reader who drags the window
     back over 860px. site/phone-kit.css already hides .site-header and
     .site-footer this way - the footer of these seven sits INSIDE their
     <main>, so it is hidden with the page and the kit's own footer stands in
     its place. */
  html[data-phone='stack'][data-phone-kit='on'] body > main:not(.stack) { display: none; }

  /* --- what a sheet of these seven holds that no other screen does -------- */

  /* A heading that opens a second block inside one sheet. The five small pages
     are one sheet each (the order of this lane), so a page that says two
     things - the stores and what is inside the app, the map and its sections -
     says the second under a heading rather than in a sheet of its own. The
     rhythm is the sheet's own gap, so the block below reads as one unit with
     it rather than as a new sheet's head. */
  html[data-phone='stack'][data-phone-kit='on'] .sheet-heading.rule-gap {
    margin-top: var(--resurs-m-gap-lg);
  }

  /* --- two more the shared layer owes, both measured against the mock ----- */
  /* Also filed as KIT-REQUESTs. Each is a value the port of
   * mocks/mobile/site/d/mobile-d.css lost, and each shows on the picture the
   * fidelity probe takes of this arm's own screens.
   *
   * The segment: mobile-d.css:363 sets padding 8px 10px, font-weight 500 and
   * text-align center; site/phone-kit.css carries padding 0 10px, no weight
   * and no alignment, and adds min-width: 0 the mock does not have. */
  /* The segmented pill's own box: mobile-d.css:361 gives .segments a margin
     and nothing else, so it is a block and its track sits over its panels.
     site/partners.css:62 and site/financing.css:278 both make .segments an
     inline-flex row for the desk, and site/phone-kit.css sets only the margin,
     so on a route that loads either of those the track and the panels stand
     side by side. Same class of leak as .sheet, and the same answer. */
  html[data-phone-forms] .stack .segments {
    display: block;
    padding: 0;
    border-radius: 0;
    background: none;
    max-width: none;
    overflow: visible;
  }

  html[data-phone-forms] .stack .segment {
    min-width: auto;
    padding: 8px 10px;
    font-weight: 500;
    text-align: center;
  }
  /* The chevron at the end of a row: mobile-d.css:113. site/phone-kit.css has
     the rule but scoped to the footer's folds, so a row's chevron inside a
     sheet keeps the page's ink and the glyph's own block layout. */
  html[data-phone-forms] .stack .icon-chevron {
    display: grid;
    flex: none;
    color: var(--resurs-ink-muted);
  }
}