/* The phone lane of Client Access.

   /client-access and / are the same file: the intake is a <dialog> that opens
   over the hero. So these rules are scoped to the dialog, never to the page -
   the bare hero keeps its cinematic front-door treatment and its Open Site
   entry, exactly as it is today.

   Desktop is untouched. Everything here lives under 820px. */

@media (max-width: 820px) {
  /* The dialog is opened with showModal(), so it sits in the top layer and owns
     the screen. It is a column: header, progress rail, then the step taking
     whatever height is left. Sizing the step with height:100% instead made it
     as tall as the whole dialog while starting 92px down the page, so it hung
     92px past the bottom of the screen and carried its own bottom padding off
     with it - which is how the Back button ended up under the tab bar. */
  /* [open] is load-bearing, not decoration. The browser hides a closed dialog
     with its own display:none, and any author display rule beats that - so
     giving this selector a display without the [open] qualifier left the closed
     deck rendering as a full-screen black box over the hero on every phone
     visit to the home page. It takes the screen only when it is open. */
  .intake-deck[open] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding-top: var(--phone-safe-top);
  }

  .deck-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* On desktop the photograph is the layout's other column. The first phone
     pass hid it, which left every question sitting on flat black while the
     rest of the site is photography - and it threw away the crossfade the
     flow already runs between steps. Here the photograph is the backdrop: it
     covers the whole dialog, header included, and everything else sits above
     it as glass. Step to step, the existing animation slides one image out
     and the next in behind the question, for nothing. */
  .deck-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 0;
    overflow: hidden;
    background: #0e0d0b;
  }

  /* The desktop scrim is a side gradient built for a column. A backdrop needs
     the opposite: clear enough at the top to read as a photograph, darkest at
     the bottom where the controls and the tab bar live. */
  .media-layer::after {
    background:
      linear-gradient(180deg, rgba(12, 11, 10, 0.55) 0%, rgba(12, 11, 10, 0.28) 30%, rgba(12, 11, 10, 0.62) 62%, rgba(12, 11, 10, 0.9) 100%);
  }

  /* The grid must not be positioned, or the absolute backdrop resolves to the
     grid and stops at the header instead of covering the dialog. The panel's
     own opaque fill is what hid the photograph on the first pass: the image
     was loaded and full-size underneath a solid rgb(16,16,15). */
  .deck-grid { position: static; z-index: auto; }
  .deck-panel { background: transparent; }
  .deck-head, .deck-progress { position: relative; z-index: 1; background: transparent; }
  /* The base sheet gives the rail top:92px for a placement it no longer has.
     With the rail made relative here, that offset shoved it 92px down into the
     first row of chips as a copper line through every label. */
  .deck-progress { top: 0; }

  /* Controls become glass: the photograph stays visible through them, which is
     what makes a chip read as sitting on the image rather than pasted over it.
     The described photo cards on the opening screen keep their own treatment. */
  .choice:not(.has-note),
  .deck-panel input,
  .deck-panel textarea,
  .deck-panel select,
  .review-item,
  .screen-actions button {
    border: 1px solid rgba(255, 247, 230, 0.18);
    border-radius: 14px;
    background: rgba(14, 13, 11, 0.52);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
  }

  /* Centred, the way a one-question-at-a-time form reads: the question in the
     middle, the answers in the middle under it. The base chip keeps its text on
     the left to leave room for a radio dot on the right; centred text has no
     use for the dot, and the selected state is already the copper ring. */
  .choice:not(.has-note) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    font-size: 15px;
    text-align: center;
  }
  .choice:not(.has-note)::after { display: none; }
  .deck-screen h2, .screen-copy, .selection-note, .screen-side { text-align: center; }
  /* text-align centres text inside its own box, and the base sheet caps the
     heading at 17ch and the copy at 42ch. On a 402px screen that is a 301px
     box anchored to the left edge, so "Asset Class" and "Contact" centred at
     165px while every chip, label and counter under them centred at 201px.
     The panel is the only cap here. */
  .deck-screen h2, .screen-copy { max-width: none; }
  .choice:not(.has-note).is-selected {
    border-color: var(--copper, #c9a86a);
    background: rgba(201, 168, 106, 0.16);
    box-shadow: 0 0 0 1px var(--copper, #c9a86a);
  }

  .deck-screen h2 { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.6); }
  .screen-copy, .selection-note, .field label { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }

  /* The Contact screen was the one place with two alignments on it: a centred
     heading over left-flush field labels. The labels centre with everything
     else now; the inputs stay full width, so the typed text keeps its left
     edge and the label reads as a caption above the field. */
  .field label { display: block; text-align: center; }

  .deck-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* The step fills the panel, so a short step still reaches the bottom instead
     of stopping where its content ran out. The reserve belongs here, on the
     thing that scrolls, or the tab bar covers the last control. */
  .deck-screen {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-bottom: calc(var(--phone-tab-h) + var(--phone-safe-bottom) + 12px);
  }

  /* The desktop layout drops the title down the page to sit against the media
     column. There is no media column here, so that margin is a hole. Below it,
     the question was sitting straight on the things to tap - 14px between the
     word and the first row of answers. A question needs air before its answers,
     or it reads as one of them. */
  .deck-screen h2 { margin-top: 0; margin-bottom: 30px; }
  .screen-copy { margin-top: -14px; margin-bottom: 26px; }

  /* The question was pinned to the top with the photograph as dead space under
     it and the actions on the floor. Two auto margins - one above the first
     line of the question, one above the actions - split the free height
     evenly, so the question and its answers float in the middle of the screen
     with the actions still on the bottom edge where the thumb is. A screen
     taller than the viewport collapses both to zero and scrolls as before. */
  .deck-screen > h2:first-child,
  .deck-screen > .screen-side:first-child { margin-top: auto; }
  .screen-actions { margin-top: auto; }

  /* A file opened at its own address - /buyer-file after a reload - carries the
     Add Details switch, and the base phone sheet stacked it as a full-width bar
     above Back and Next. Philip: Add Details and Next sit next to each other.
     The counter keeps the caption row it has on every screen; the switch joins
     the buttons - Back, Add Details, Next - at one height. A file that came
     through Client Access has no switch and keeps the two-button row, so Next
     is always bottom-right and Back always bottom-left either way. */
  .screen-actions:has(.detail-switch) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "meta meta meta" "back switch next";
  }
  .screen-actions:has(.detail-switch) .screen-meta { display: contents; }
  .screen-actions:has(.detail-switch) .screen-count { grid-area: meta; }
  .screen-actions:has(.detail-switch) .detail-switch { grid-area: switch; min-height: 44px; }

  /* The opening has no Back, no Next and no counter, so its actions row was an
     empty band of padding holding the photo cards off the tab bar. */
  .deck-screen[data-screen="detail"] .screen-actions { display: none; }

  /* The file identity - the mark and its name - went right corner, then centred
     inside a grid cell that was not the middle of the screen, then a left rail
     under the wordmark. Philip's call: centred or right, but one system. The
     screen's axis is the centre - every question, caption, chip and counter
     sits on it - so the identity sits on it too, at the true centre of the
     viewport. The two outer columns are equal and may shrink to nothing, which
     is what keeps the pair in the middle whatever the wordmark and the close
     control measure; those two stay on the edges, the way the tab bar does.
     One row cannot hold the wordmark, "Buying Criteria Intake" and the close
     control at readable sizes on a 375px phone (measured: the title alone is
     157px at 15px), so the identity keeps the second row the base sheet gives
     it. */
  .deck-head {
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: 9px;
    /* The base gutters are 14px left and 9px right, which put the middle of
       the header 2.5px right of the middle of the screen. One 15px gutter on
       both sides - the gutter the chips and the buttons already use - so the
       wordmark, the close control and every control below them share edges,
       and the centre of the header is the centre of the screen. */
    padding-inline: 15px;
  }
  .deck-brand { grid-area: 1 / 1 / 2 / 2; justify-self: start; padding-right: 0; }
  .deck-brand::after { display: none; }
  .deck-close { grid-area: 1 / 4 / 2 / 5; justify-self: end; align-self: center; }
  .deck-mark { grid-area: 2 / 2 / 3 / 3; justify-self: end; margin: 0; }
  .deck-name { grid-area: 2 / 3 / 3 / 4; justify-self: start; }
  .deck-name strong { text-align: left; }

  /* The phone rule packs every choice grid two-up regardless of what the step
     asked for, which squeezes a described choice into a column too narrow to
     read - "Size, budget, timing and criteria" wrapped to three lines. A step
     that asks for one column gets one. */
  .choice-grid[data-columns="1"] { grid-template-columns: minmax(0, 1fr); }

  /* Two choices on a tall phone once took half the screen each, on the theory
     that two answers with nothing else on the page should be the page. Philip,
     on the live build: "SQUARES TOO BIG". They are cards now - the 21:9 strip
     of the site's cinematic video hero - and the pair floats mid-screen over
     the photograph the way every later question does, so the first screen and
     the last share one rhythm. The card's own aspect ratio sets its height. */
  .deck-screen[data-screen="detail"] { padding-top: 0; }
  .deck-screen[data-screen="detail"] > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .deck-screen[data-screen="detail"] .choice-grid {
    flex: 0 0 auto;
    grid-template-rows: auto auto;
    /* Chips sit 10px apart because they are one answer set. These two are two
       different files, and at 10px they read as one tall card with a seam. */
    gap: 18px;
    margin: auto 0;
  }

  /* The rest of the site is photography: the hero is full-bleed video, the deal
     cards carry a real image behind their type. This screen was flat black with
     two outlined rectangles, which is why it did not look like the same site.
     A described choice is now built like a deal card - photo, scrim, type over
     it, 16px radius - so the intake opens in the same language as everything
     else. */
  .choice.has-note {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    padding: 20px;
    border: 1px solid var(--line-soft, rgba(255, 247, 230, 0.14));
    border-radius: 16px;
    text-align: center;
  }

  /* The glass rule above also caught Next, and Next is the one control that
     must not be glass: its enabled state is the cream fill the desktop uses,
     and under glass an enabled Next drew its dark ink on dark glass - the same
     look as disabled. That is the "Next turns dark after I pick" report. An
     enabled Next is filled; a disabled one keeps the dim look the base sheet
     gives it, so the two states read as two states. */
  .screen-actions .continue-button:not(:disabled) {
    border-color: var(--story-fill, #e7d8bd);
    background: var(--story-fill, #e7d8bd);
    color: var(--story-fill-ink, #1e1913);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .choice__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  /* Type over a photograph needs its own floor or it sits on whatever the image
     happens to be doing underneath it - and these photographs are bright in the
     middle, exactly where centred type lands.
     This pseudo-element is also the radio dot the base stylesheet draws, so its
     border and size have to be reset here or the dot survives in the corner. */
  .choice.has-note::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: radial-gradient(78% 52% at 50% 50%, rgba(10, 9, 8, 0.78), rgba(10, 9, 8, 0.52) 70%, rgba(10, 9, 8, 0.62) 100%);
  }

  .choice.has-note .choice__text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }

  /* The counter measures progress through the file. This screen is the choice
     of which file to fill in, so "1 / 2" is counting something that has not
     started, next to two photographs that are the whole screen. */
  .deck-screen[data-screen="detail"] .screen-count { display: none; }

  .choice.has-note.is-selected {
    border-color: var(--copper, #c9a86a);
    box-shadow: 0 0 0 1px var(--copper, #c9a86a);
  }

  .choice__label {
    font-family: var(--serif, Georgia, serif);
    font-size: 34px;
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1.05;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
  }

  .choice__note {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.45;
    opacity: 0.86;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  }

  /* 44px is the platform's minimum tappable size. */
  .deck-panel button,
  .deck-panel a,
  .deck-panel input,
  .deck-panel select {
    min-height: 44px;
  }

  .deck-head { padding-top: 6px; }
  .deck-close { min-width: 44px; min-height: 44px; }
}

/* A step that advances on its own does so by moving, which is disorienting when
   the reader has asked the system to hold still. Cross-fade instead. */
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .deck-panel { transition: opacity 120ms linear; }
}