/* The phone layer's token layer: what version D of the phone site needs that
 * design/tokens.css and design/palette.css do not declare. Same --resurs-*
 * namespace, same rule as every token layer in this repo - a component never
 * carries a literal, and there is no colour here at all. D's colours are the
 * site's own, reached through design/tokens.css and design/palette.css, which
 * every route already loads. What this file adds is the phone's geometry, the
 * stack's one affordance, and the three chrome values the phone owns.
 *
 * Ported verbatim from mocks/mobile/site/d/mobile-d.tokens.css (branch
 * mobile-fable, 9cc2b41), his pick of 2026-09-04. The --resurs-p-* block below
 * it is this port's own and is explained where it stands.
 *
 * Loaded by every route that carries the phone kit. It declares tokens and
 * nothing else, so it costs the desk page nothing: no rule here can match. */
:root {
  --resurs-bar-height: 64px;

  /* The sheet's edge left showing under the hero at rest: the stack's whole
     affordance. VTB's own panel shows about this much of itself over the hero
     before the first scroll (refs/vtb/mobile/rec-1/NOTES.md, the panel pulled
     up over the hero). */
  --resurs-m-peek: 28px;

  /* Rows: the VTB row, an object on a plate beside its name. */
  --resurs-m-row: 64px;
  --resurs-m-plate: 44px;
  --resurs-m-plate-lg: 52px;
  --resurs-m-plate-sm: 40px;

  /* Rhythm inside a sheet. */
  --resurs-m-gap: 22px;
  --resurs-m-gap-lg: 28px;
  /* The beat: a sheet's own ground under its last row. The stack covers a
     pinned sheet from its foot upward, so the next sheet's edge crosses the
     beat before it reaches anything the reader can tap - once as the sheet
     arrives and once as it is covered - and the last control of any sheet
     stays tappable for two beats of scroll on top of its own height: 200px
     at least, the floor tools/mobile.gate.json sets for reach. */
  --resurs-m-sheet-beat: 100px;

  /* Fields and the step numeral. Both carry the -p- namespace: site/dossier
     .tokens.css and site/partners.tokens.css declare --resurs-field-height and
     --resurs-size-step at other values for the desk, and this file loads last. */
  --resurs-p-field-height: 48px;
  --resurs-p-size-step: 20px;

  /* The photograph's crop at phone width: the lighthouse right of centre so the
     panel at the foot clears its base and the tree. */
  --resurs-m-hero-crop: 58% 50%;

  /* --- what the phone chrome owns --------------------------------------- */
  /* site/chrome.tokens.css holds the desk chrome's panel duration and header
     shadow, and only the seven routes of that family load it: adding it to the
     other thirty-one would move their field colours and page-title sizes, which
     it declares differently from site/{platform,dossier,financing,partners}
     .tokens.css (measured 2026-09-04, seven tokens disagree). So the phone
     chrome declares its own. They are not a second definition of the desk
     chrome's: the desk mega-panel and D's full-screen menu are two different
     panels, and at any width exactly one of them is built.

     There is no colour here, and no hex anywhere in the phone layer. The bar's
     shadow is a GEOMETRY of this layer over two colours of design/palette.css,
     so a palette swap carries it. The form's own two state colours - invalid
     and saved - exist in no layer every route loads, so the phone layer does
     not invent them: site/phone-kit.js reads them at form-build time and stops
     the page if the route's family has not declared them. Failing loud is the
     honest answer; a hex here would pin a colour outside the palette, which is
     the one defect this repo names by name. */
  --resurs-p-open: 260ms;                 /* D's menu opening */
  --resurs-p-bar-shadow: 0 1px 0 var(--resurs-plate-seat),
                         0 8px 24px -16px var(--resurs-photo-scrim);
  --resurs-p-field-edge: var(--resurs-hairline);
  --resurs-p-field-ground: var(--resurs-ground);
}