/* The phone chrome: version D's bar, dense menu and folded footer, and the two
 * blocks its builders raise inside a sheet - the lead form and the segmented
 * pill. Ported from mocks/mobile/site/d/mobile-d.css (branch mobile-fable,
 * 9cc2b41), his pick of 2026-09-04.
 *
 * Two scopes hold every rule in this file, and they are the whole reason the
 * desk page did not move:
 *
 *   @media (max-width: 860px)   site/header.css's own phone breakpoint. Above
 *                               it nothing here matches, and site/phone-kit.js
 *                               has built nothing to match.
 *   [data-phone-kit='on']       stamped by the kit only after it has built its
 *                               chrome. If the script never runs, the site's
 *                               own header and folded footer stand exactly as
 *                               master leaves them - the phone layer degrades
 *                               to the floor rather than to nothing.
 *
 * Inside those two, every selector is a descendant of one [data-phone-region].
 * Eighty-two of version D's one hundred and twenty-seven class names already
 * mean something on this site - .brand, .channel, .contact-row, .signoff, .row,
 * .field and .sheet among them - so an unscoped port would have restyled the
 * body of /contacts/ and /media/ at phone width. The region attribute is the
 * fence, in both directions.
 *
 * What D deliberately inherits, it still inherits: .pill, .plate, .dot, .icon,
 * .placeholder and .kicker are site/base.css's and site/act2-shared.css's, and
 * the phone layer adds to them rather than restating them. No colour, radius,
 * size or duration below is a literal. */

/* Built or not, the phone chrome renders at one width only. This is the one
 * rule outside the breakpoint, and it is what makes a page dragged from 390 to
 * 1440 correct rather than merely unlikely. */
[data-phone-region] { display: none; }

@media (max-width: 860px) {
  /* The site's own chrome steps aside, and only once the phone's is standing.
     Both are `position: fixed` (site/header.css), so this hides a box that was
     never in the flow: no band of content moves by a pixel. */
  [data-phone-kit='on'] .site-header,
  [data-phone-kit='on'] .site-footer,
  [data-phone-kit='on'] .mega,
  [data-phone-kit='on'] .menu-veil { display: none; }

  /* --- the bar --------------------------------------------------------- */
  /* Fixed, 64px, never hides and never collapses: VTB's bar only changes its
     ground (refs/vtb/mobile/rec-1/NOTES.md, "Site header"). Over the
     photograph it has no ground of its own; once a sheet's white is under it,
     it takes the sheet's ground and ink. A legibility rule, so it is not gated
     on motion, and it reads the data-covered the page already declares. */
  [data-phone-kit='on'] [data-phone-region='bar'] {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--resurs-bar-height);
    padding-inline: var(--resurs-gutter);
    color: var(--resurs-on-photo);
    border-bottom: 1px solid transparent;
    transition: background var(--resurs-quick) var(--resurs-ease),
                color var(--resurs-quick) var(--resurs-ease),
                border-color var(--resurs-quick) var(--resurs-ease);
  }
  [data-phone-region='bar'] .brand,
  [data-phone-region='foot'] .brand {
    display: flex; align-items: center; gap: 8px; min-height: 44px; flex: none;
  }
  [data-phone-region='bar'] .brand-mark,
  [data-phone-region='foot'] .brand-mark { display: block; height: 32px; width: auto; }
  [data-phone-region='bar'] .brand-word,
  [data-phone-region='foot'] .brand-word {
    font-size: var(--resurs-size-mark); letter-spacing: 0.08em; font-weight: 600;
  }
  [data-phone-region='bar'] .bar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
  [data-phone-region='bar'] .bar-apply {
    min-height: 44px; padding: 6px 6px 6px 14px; gap: 8px; font-size: var(--resurs-size-small);
  }
  [data-phone-region='bar'] .bar-apply .dot { width: 30px; height: 30px; }
  [data-phone-region='bar'] .phone-menu-trigger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--resurs-glass-edge);
    border-radius: var(--resurs-radius-pill);
    background: transparent;
    color: var(--resurs-on-photo);
    cursor: pointer;
    transition: background var(--resurs-quick) var(--resurs-ease),
                border-color var(--resurs-quick) var(--resurs-ease);
  }
  [data-phone-region='bar'] .phone-menu-trigger .glyph { display: grid; }
  [data-phone-region='bar'] .menu-trigger-close { display: none; }
  [data-phone-region='bar'] .phone-menu-trigger[aria-expanded='true'] .menu-trigger-open { display: none; }
  [data-phone-region='bar'] .phone-menu-trigger[aria-expanded='true'] .menu-trigger-close { display: grid; }

  [data-covered='true'] [data-phone-region='bar'] {
    background: var(--resurs-ground);
    color: var(--resurs-ink);
    border-bottom-color: var(--resurs-hairline);
  }
  [data-covered='true'] [data-phone-region='bar'] .bar-apply {
    border-color: var(--resurs-hairline); color: var(--resurs-ink);
  }
  [data-covered='true'] [data-phone-region='bar'] .phone-menu-trigger {
    border-color: var(--resurs-hairline); color: var(--resurs-ink); background: var(--resurs-ground);
  }
  [data-covered='true'] [data-phone-region='bar'] .phone-menu-trigger[aria-expanded='true'] {
    background: var(--resurs-surface);
  }
  /* The brushed emblem dissolves on white; the site lifts its contrast there. */
  [data-covered='true'] [data-phone-region='bar'] .brand-mark,
  [data-phone-region='foot'] .brand-mark {
    filter: var(--resurs-mark-lift, contrast(1.35) brightness(0.85));
  }
  [data-covered='true'][data-scrolled='true'] [data-phone-region='bar'] {
    box-shadow: var(--resurs-p-bar-shadow);
  }
  /* At the narrowest phones the call keeps its tap target and gives up its word. */
  @media (max-width: 375px) {
    [data-phone-region='bar'] .bar-apply-word { display: none; }
    [data-phone-region='bar'] .bar-apply { padding: 6px; min-width: 44px; justify-content: center; }
  }

  /* --- the menu -------------------------------------------------------- */
  /* A full panel under the bar: his seven destinations as bands with their
     sub-items beneath - the dense menu, the desk's band menu folded to one
     column. Nothing scrolls under it. */
  /* Nothing scrolls under the panel - and site/header.css:235 already says so
     for html[data-menu='open'], which is the attribute the kit sets. One rule,
     not two. */
  [data-phone-kit='on'] [data-phone-region='menu'] {
    display: block;
    position: fixed;
    inset: var(--resurs-bar-height) 0 0 0;
    z-index: 9;
    overflow: auto;
    padding: 16px var(--resurs-gutter) 32px;
    background: var(--resurs-ground);
    border-top: 1px solid var(--resurs-hairline);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--resurs-p-open) var(--resurs-ease),
                transform var(--resurs-p-open) var(--resurs-ease);
  }
  [data-phone-region='menu'][data-state='open'],
  [data-phone-region='menu'][data-state='opening'] { opacity: 1; transform: none; }
  [data-phone-region='menu'] .menu-rows { display: grid; gap: 8px; }
  [data-phone-region='menu'] .menu-row {
    border-radius: var(--resurs-radius-tile); background: var(--resurs-surface);
  }
  [data-phone-region='menu'] .menu-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--resurs-m-row);
    padding: 10px 14px 10px 10px;
    color: var(--resurs-ink);
  }
  [data-phone-region='menu'] .menu-head .plate {
    width: var(--resurs-m-plate); height: var(--resurs-m-plate);
  }
  [data-phone-region='menu'] .menu-name {
    flex: 1; min-width: 0; font-size: var(--resurs-size-nav); font-weight: 500;
  }
  [data-phone-region] .icon-chevron { display: grid; color: var(--resurs-ink-muted); flex: none; }
  [data-phone-region='menu'] .menu-sub {
    display: flex; flex-wrap: wrap; gap: 0 18px; padding: 0 12px 6px;
  }
  [data-phone-region='menu'] .menu-sub a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
    font-size: var(--resurs-size-small); color: var(--resurs-ink-soft);
  }
  [data-phone-region='menu'] .menu-foot { margin-top: 20px; display: grid; gap: 10px; }
  [data-phone-region='menu'] .menu-foot .pill { justify-content: space-between; min-height: 48px; }
  [data-phone-region='menu'] .pill-ink {
    border-color: var(--resurs-hairline); color: var(--resurs-ink);
  }
  /* The panel and the foot are opaque, on the site's own white and grey - so
     nothing in them may read whether the PHOTOGRAPH is under the bar.
     site/header.css:71 writes [data-covered='true'] .pill-outline unscoped, so
     on the main page at rest (covered false, the hero still on screen) the
     menu's sign-in pill came out in the photograph's white ink on white
     ground: invisible. Measured by phone_fidelity, 2026-09-04, as a 12.06%
     difference from the mock on / and 0.00% on the two routes that declare
     themselves covered. These two rules are the fence on that side. */
  [data-phone-region='menu'] .pill-outline,
  [data-phone-region='foot'] .pill-outline {
    border-color: var(--resurs-hairline);
    color: var(--resurs-ink);
  }
  [data-phone-region='menu'] .brand-mark {
    filter: var(--resurs-mark-lift, contrast(1.35) brightness(0.85));
  }

  /* --- the footer ------------------------------------------------------ */
  /* VTB folds its footer into rows that open, hairline over hairline, one
     chevron at the right, on a grey a shade under the page (refs/vtb/mobile/
     rec-2/NOTES.md, "Footer accordion rows"). The site's dense footer becomes
     five such rows; the sign-off stays the last line of the site, once. */
  /* The main page's sheet lifts itself off the photograph with
     `.sheet { box-shadow: var(--resurs-sheet-lift) }` - 0 -18px 48px - at
     z-index 2 (site/sheet.css), and its bottom edge is the footer's top edge.
     The blur reaches past that edge, and z-index 2 outranks a footer that had
     none, so the shadow was painted OVER the footer's first eleven pixels as
     a grey fade: measured 2026-09-04 at 1.50% against D's mock on / and
     0.000% on the two routes whose sheet carries no shadow. VTB's footer is
     one solid band and so is D's, so the footer takes a rank of its own and
     the band starts at its own hairline. Below the bar (10) and the menu (9),
     and inside the phone layer only - the desk keeps the lift it was drawn
     with. */
  [data-phone-kit='on'] [data-phone-region='foot'] {
    display: block;
    position: relative;
    z-index: 3;
    background: var(--resurs-surface);
    border-top: 1px solid var(--resurs-hairline);
    padding: 32px var(--resurs-gutter) 28px;
    font-size: var(--resurs-size-small);
  }
  [data-phone-region='foot'] .foot-brand { display: grid; gap: 10px; justify-items: start; }
  [data-phone-region='foot'] .brand { color: var(--resurs-ink); }
  [data-phone-region='foot'] .foot-about {
    color: var(--resurs-ink-muted); max-width: 30ch; line-height: 1.45;
  }
  [data-phone-region='foot'] .foot-folds {
    margin-top: 20px; border-top: 1px solid var(--resurs-hairline);
  }
  [data-phone-region='foot'] .foot-fold { border-bottom: 1px solid var(--resurs-hairline); }
  [data-phone-region='foot'] .foot-fold-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 6px 4px;
    list-style: none;
    cursor: pointer;
    font-size: var(--resurs-size-body);
    font-weight: 500;
    color: var(--resurs-ink);
  }
  [data-phone-region='foot'] .foot-fold-head::-webkit-details-marker,
  [data-phone-region='foot'] .foot-fold-head::marker { display: none; content: ''; }
  [data-phone-region='foot'] .foot-fold-head .icon-chevron {
    transition: transform var(--resurs-quick) var(--resurs-ease);
  }
  [data-phone-region='foot'] .foot-fold[open] .foot-fold-head .icon-chevron { transform: rotate(180deg); }
  [data-phone-region='foot'] .foot-fold-body { padding: 0 4px 12px; }
  [data-phone-region='foot'] .foot-links { display: grid; }
  [data-phone-region='foot'] .foot-links a {
    display: flex; align-items: center; min-height: 44px; color: var(--resurs-ink-soft);
  }
  [data-phone-region='foot'] .foot-contacts { display: grid; gap: 6px; margin: 0; }
  [data-phone-region='foot'] .contact-row {
    display: grid; grid-template-columns: 84px minmax(0, 1fr);
    align-items: center; gap: 8px; min-height: 36px;
  }
  [data-phone-region='foot'] .contact-row dt { color: var(--resurs-ink-muted); }
  [data-phone-region='foot'] .contact-row dd { margin: 0; }
  [data-phone-region='foot'] .channels { display: grid; }
  [data-phone-region='foot'] .channel {
    display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--resurs-ink-soft);
  }
  [data-phone-region='foot'] .channel .icon { color: var(--resurs-ink-muted); }
  [data-phone-region='foot'] .foot-legal {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--resurs-hairline);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    color: var(--resurs-ink-muted);
  }
  [data-phone-region='foot'] .foot-bottom { display: flex; flex-wrap: wrap; gap: 0 18px; }
  [data-phone-region='foot'] .foot-bottom a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
    color: var(--resurs-ink-muted);
  }
  [data-phone-region='foot'] .signoff {
    margin-top: 28px;
    text-align: center;
    font-size: var(--resurs-size-signoff);
    font-weight: 300;
    letter-spacing: -0.015em;
    color: var(--resurs-ink);
  }

  /* --- reduced motion --------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    [data-phone-region='bar'],
    [data-phone-region='menu'],
    [data-phone-region='bar'] .phone-menu-trigger,
    [data-phone-region='foot'] .foot-fold-head .icon-chevron { transition: none; }
  }
}

/* --- the two blocks the kit's builders raise inside a sheet ---------------- */
/* site/phone-kit.js's form() and segments() render into a page's own markup,
 * so their rules are scoped to a page that has opted into the stack rather
 * than to a chrome region. .field, .lead, .segment and .panel all mean
 * something else on the desk site; html[data-phone='stack'] is the fence.
 *
 * No page opts in yet in this lane. These rules ship with the builders that
 * need them because a builder whose stylesheet arrives in a later lane is a
 * block that renders nothing, which this repo does not ship. */
@media (max-width: 860px) {
  html[data-phone='stack'][data-phone-kit='on'] .lead { display: grid; gap: 16px; }
  html[data-phone='stack'][data-phone-kit='on'] .lead-head { display: grid; gap: 6px; }
  html[data-phone='stack'][data-phone-kit='on'] .lead-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'] .lead-subtitle {
    font-size: var(--resurs-size-small); line-height: 1.5; color: var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] .lead-fields { display: grid; gap: 12px; }
  html[data-phone='stack'][data-phone-kit='on'] .field { display: grid; gap: 6px; }
  html[data-phone='stack'][data-phone-kit='on'] .field label {
    font-size: var(--resurs-size-small); color: var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] .field input,
  html[data-phone='stack'][data-phone-kit='on'] .field textarea,
  html[data-phone='stack'][data-phone-kit='on'] .field 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;
    /* Sixteen, never less: a smaller field zooms the whole page on iOS. */
    font-size: var(--resurs-size-body);
    transition: border-color var(--resurs-quick) var(--resurs-ease);
  }
  html[data-phone='stack'][data-phone-kit='on'] .field textarea { min-height: 96px; resize: vertical; }
  html[data-phone='stack'][data-phone-kit='on'] .field input::placeholder,
  html[data-phone='stack'][data-phone-kit='on'] .field textarea::placeholder {
    color: var(--resurs-placeholder-ink);
  }
  html[data-phone='stack'][data-phone-kit='on'] .field input:focus-visible,
  html[data-phone='stack'][data-phone-kit='on'] .field textarea:focus-visible,
  html[data-phone='stack'][data-phone-kit='on'] .field select:focus-visible {
    outline: none; border-color: var(--resurs-accent); box-shadow: 0 0 0 3px var(--resurs-accent-soft);
  }
  html[data-phone='stack'][data-phone-kit='on'] .field-hint {
    font-size: var(--resurs-size-small); color: var(--resurs-ink-muted);
  }
  /* The two state colours the phone layer refuses to invent: site/phone-kit.js
     stops the page if the route's own token layer has not declared them. */
  html[data-phone='stack'][data-phone-kit='on'] .field[data-invalid='true'] input,
  html[data-phone='stack'][data-phone-kit='on'] .field[data-invalid='true'] textarea,
  html[data-phone='stack'][data-phone-kit='on'] .field[data-invalid='true'] select {
    border-color: var(--resurs-invalid); background: var(--resurs-invalid-soft);
  }
  html[data-phone='stack'][data-phone-kit='on'] .field-error {
    font-size: var(--resurs-size-small); color: var(--resurs-invalid);
  }
  html[data-phone='stack'][data-phone-kit='on'] .field-consent {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
  }
  html[data-phone='stack'][data-phone-kit='on'] .field-consent input {
    width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0;
    accent-color: var(--resurs-accent); flex: none;
  }
  html[data-phone='stack'][data-phone-kit='on'] .field-consent label {
    flex: 1; min-width: 0; color: var(--resurs-ink); line-height: 1.4;
  }
  html[data-phone='stack'][data-phone-kit='on'] .field-consent .field-error { flex-basis: 100%; }
  html[data-phone='stack'][data-phone-kit='on'] .lead-summary {
    padding: 12px 16px; border-radius: var(--resurs-radius-tile);
    font-size: var(--resurs-size-small); line-height: 1.45;
  }
  html[data-phone='stack'][data-phone-kit='on'] .lead[data-state='invalid'] .lead-summary,
  html[data-phone='stack'][data-phone-kit='on'] .lead[data-state='error'] .lead-summary {
    background: var(--resurs-invalid-soft); color: var(--resurs-invalid);
  }
  html[data-phone='stack'][data-phone-kit='on'] .lead[data-state='saved'] .lead-summary {
    background: var(--resurs-saved-soft); color: var(--resurs-saved);
  }
  html[data-phone='stack'][data-phone-kit='on'] .lead[data-state='saved'] .lead-fields,
  html[data-phone='stack'][data-phone-kit='on'] .lead[data-state='saved'] .lead-submit { display: none; }
  html[data-phone='stack'][data-phone-kit='on'] .lead-again {
    display: none; align-items: center; gap: 8px; min-height: 44px; border: 0;
    background: none; padding: 0; font: inherit; cursor: pointer; justify-self: start;
    color: var(--resurs-accent);
  }
  html[data-phone='stack'][data-phone-kit='on'] .lead[data-state='saved'] .lead-again { display: inline-flex; }
  html[data-phone='stack'][data-phone-kit='on'] .lead-submit {
    appearance: none;
    border: 0;
    width: 100%;
    min-height: 48px;
    padding: 0 8px 0 22px;
    border-radius: var(--resurs-radius-pill);
    background: var(--resurs-accent);
    color: var(--resurs-on-accent);
    font: inherit;
    font-size: var(--resurs-size-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: background var(--resurs-quick) var(--resurs-ease),
                opacity var(--resurs-quick) var(--resurs-ease);
  }
  html[data-phone='stack'][data-phone-kit='on'] .lead-submit .link-glyph {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--resurs-on-accent); color: var(--resurs-accent);
  }
  html[data-phone='stack'][data-phone-kit='on'] .lead-submit:disabled { opacity: 0.6; cursor: progress; }
  html[data-phone='stack'][data-phone-kit='on'] .lead-storage {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: var(--resurs-size-small); line-height: 1.4; color: var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] .lead-storage .glyph {
    display: grid; flex: none; margin-top: 2px;
  }

  /* The segmented pill: one pale track, the pressed segment lifted to white. */
  html[data-phone='stack'][data-phone-kit='on'] .segments { margin-top: var(--resurs-m-gap); }
  html[data-phone='stack'][data-phone-kit='on'] .segment-track {
    display: flex; gap: 2px; padding: 4px;
    border-radius: var(--resurs-radius-pill); background: var(--resurs-surface);
  }
  html[data-phone='stack'][data-phone-kit='on'] .segment {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--resurs-radius-pill);
    background: transparent;
    color: var(--resurs-ink-muted);
    font: inherit;
    font-size: var(--resurs-size-small);
    cursor: pointer;
    transition: background var(--resurs-quick) var(--resurs-ease),
                color var(--resurs-quick) var(--resurs-ease);
  }
  html[data-phone='stack'][data-phone-kit='on'] .segment[aria-selected='true'] {
    background: var(--resurs-ground);
    color: var(--resurs-ink);
    box-shadow: 0 1px 1.5px var(--resurs-plate-seat), inset 0 0 0 1px var(--resurs-plate-edge);
  }
  html[data-phone='stack'][data-phone-kit='on'] .panels { margin-top: 12px; }
  html[data-phone='stack'][data-phone-kit='on'] .panel .rows { margin-top: 0; }

  @media (prefers-reduced-motion: reduce) {
    html[data-phone='stack'][data-phone-kit='on'] .segment,
    html[data-phone='stack'][data-phone-kit='on'] .field input,
    html[data-phone='stack'][data-phone-kit='on'] .field textarea,
    html[data-phone='stack'][data-phone-kit='on'] .field select,
    html[data-phone='stack'][data-phone-kit='on'] .lead-submit { transition: none; }
  }
}

/* Last, and after every display above: a panel the kit has closed is closed. */
[data-phone-region][hidden] { display: none; }