/* The desktop lane of the intake.

   The phone lane is the site's language for a question: the photograph is the
   backdrop, one centred question floats mid-frame, the answers are glass over
   the image, the two files open as photo cards, and Next lights up when there
   is an answer. Desktop ran the older split panel until 2026-09-08 - photo in a
   side column, question flush left, flat chips with radio dots - and the
   opening's photo cards, styled for the phone only, rendered here as thumbnails
   with the label and its line run together. Philip: the mobile UI looks
   better; adapt it.

   Everything here lives above 820px. The phone lane lives below it and is not
   touched. */

@media (min-width: 821px) {
  /* The frame is a stage with a fixed height, so the photograph has room and
     the question can float in the middle of it. The base sheet sizes the frame
     to its content, which was right for a panel that had nothing behind it. */
  .intake-deck {
    width: min(1180px, calc(100% - 48px));
    height: min(820px, calc(100dvh - 48px));
    max-height: none;
    background: #0e0d0b;
  }
  /* Display belongs on [open] alone: a closed dialog is hidden by the
     browser's own display:none, and an author display beats it. */
  .intake-deck[open] {
    display: flex;
    flex-direction: column;
  }

  /* The photograph covers the whole frame, header included. The grid must not
     be positioned, or the absolute backdrop resolves to the grid and stops at
     the header. */
  .deck-grid {
    position: static;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    height: auto;
  }
  .deck-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 0;
    overflow: hidden;
    background: #0e0d0b;
  }
  /* The base 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 live. */
  .media-layer::after {
    background: linear-gradient(180deg, rgba(12, 11, 10, 0.6) 0%, rgba(12, 11, 10, 0.32) 28%, rgba(12, 11, 10, 0.58) 64%, rgba(12, 11, 10, 0.9) 100%);
  }

  /* Header: wordmark on the left edge, close control on the right, the file
     identity at the true centre. The outer columns are equal and may shrink to
     nothing, which is what keeps the pair centred whatever the wordmark and the
     close control measure. The hairline divider divided the wordmark from an
     identity that no longer sits beside it. */
  .deck-head,
  .deck-progress {
    position: relative;
    z-index: 1;
    background: transparent;
  }
  .deck-head {
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: 12px;
    padding: 0 22px;
    border-bottom-color: rgba(242, 238, 231, 0.14);
  }
  .deck-brand { grid-area: 1 / 1 / 2 / 2; justify-self: start; padding-right: 0; }
  .deck-brand::after { display: none; }
  .deck-mark { grid-area: 1 / 2 / 2 / 3; }
  .deck-name { grid-area: 1 / 3 / 2 / 4; }
  .deck-close { grid-area: 1 / 4 / 2 / 5; justify-self: end; }
  /* Add Details lives on the actions row beside Next, as on the phone. The
     header copy of the same control is the one that goes. */
  .detail-toggle { display: none; }
  /* The rail sat 72px down for a header it was absolutely positioned under. In
     the column it follows the header on its own. */
  .deck-progress { top: 0; }

  /* One centred column. The panel scrolls; the column floats its question and
     answers mid-frame with two auto margins, one above the question and one
     above the actions, so the actions keep the bottom edge. A screen taller
     than the frame collapses both and scrolls. */
  .deck-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 168, 106, 0.6) transparent;
    /* A screen tall enough to scroll grows a scrollbar, and on a system that
       draws a classic one the column shifted 5px left. Reserving the gutter
       on both edges keeps the column centred whether the bar is there or not. */
    scrollbar-gutter: stable both-edges;
  }
  .deck-screen {
    width: min(680px, 100% - 96px);
    min-height: 100%;
    margin: 0 auto;
    padding: 28px 0 32px;
  }
  .deck-screen > h2:first-child,
  .deck-screen > .screen-side:first-child,
  .deck-screen > .screen-name:first-child { margin-top: auto; }
  .screen-actions { margin-top: auto; padding-top: 28px; }

  /* The question centres on the column, not inside a 17ch box anchored to the
     left, and carries real air before the first row of answers. */
  .deck-screen h2 {
    max-width: none;
    margin: 0 0 30px;
    font-size: clamp(44px, 4.6vw, 62px);
    text-align: center;
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.6);
  }
  .screen-copy {
    max-width: none;
    margin: -16px 0 26px;
    color: #d5cec5;
    font-size: 13px;
    text-align: center;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  }
  .selection-note, .screen-side, .screen-name, .saved-note, .copy-status { text-align: center; }
  .selection-note { color: #cfc7bd; font-size: 12px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
  .saved-note { max-width: none; }

  /* 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 keep their own treatment. */
  .choice:not(.has-note),
  .deck-panel input,
  .deck-panel textarea,
  .deck-panel select,
  .review-item,
  .file-reference,
  .screen-actions button,
  .saved-actions .handoff-button,
  .saved-actions .back-button,
  .deck-close {
    border: 1px solid rgba(255, 247, 230, 0.18);
    border-radius: 14px;
    background: rgba(14, 13, 11, 0.55);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
  }
  .deck-close { border-radius: 12px; }
  .deck-panel input, .deck-panel textarea { padding: 14px 16px; font-size: 15px; }
  .deck-panel input { min-height: 52px; }
  /* The base sheet clears the range slider's box so its own track shows; the
     glass rule above would put a box back around it. */
  .field .range-input { border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Centred, the way a one-question-at-a-time form reads. 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 the copper ring. */
  .choice-grid { gap: 10px; }
  .choice:not(.has-note) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 14px 18px;
    font-size: 14px;
    text-align: center;
  }
  .choice:not(.has-note)::after { display: none; }
  /* The odd tile out still takes its row; it no longer wears the copper edge
     and the gradient the flat panel gave it. */
  .choice-grid[data-columns="2"] .choice:last-child:nth-child(odd),
  .choice-grid[data-columns="3"] .choice:last-child:nth-child(3n + 1) {
    border-left-width: 1px;
    border-left-color: rgba(255, 247, 230, 0.18);
    background: rgba(14, 13, 11, 0.55);
  }
  .choice:not(.has-note).is-selected,
  .choice-grid[data-columns="2"] .choice.is-selected:last-child:nth-child(odd),
  .choice-grid[data-columns="3"] .choice.is-selected:last-child:nth-child(3n + 1) {
    border-color: var(--copper, #c9a86a);
    background: rgba(201, 168, 106, 0.16);
    box-shadow: 0 0 0 1px var(--copper, #c9a86a);
  }

  /* Fields: the label is a caption above its field, centred with everything
     else; the input keeps its full width and its left-edged text. */
  .field-grid { gap: 14px; }
  .field label { text-align: center; font-size: 13px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
  .field.is-range label { text-align: left; }

  /* Review: the answers as glass cards, not cells in a hairline table. */
  .review-list { gap: 10px; border: 0; background: transparent; }
  .review-item { padding: 15px 16px; }

  /* Actions: Back and Add Details are glass; Next is the one control that is
     not. Its enabled state is the cream fill, and under glass an enabled Next
     drew its dark ink on dark glass - the same look as disabled. */
  .screen-actions button { min-height: 50px; font-size: 10px; }
  .screen-actions .detail-switch { border-radius: 14px; }
  /* Named columns, so a screen without Back keeps Next bottom-right and the
     details switch in the middle. Auto placement slid both a column left. */
  .screen-actions { grid-template-areas: "back meta next"; }
  .screen-actions .back-button { grid-area: back; }
  .screen-actions .screen-meta { grid-area: meta; }
  .screen-actions .continue-button { grid-area: next; }
  .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;
  }
  .saved-actions .is-primary {
    border-color: var(--story-fill, #e7d8bd);
    background: var(--story-fill, #e7d8bd);
    color: var(--story-fill-ink, #1e1913);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .file-reference { text-align: center; }

  /* The opening: two photo cards side by side, the way the phone stacks them.
     The heading is the cards themselves; the text stays for screen readers.
     The counter would count a file that has not started, and the actions row
     has nothing to hold. */
  .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-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: auto 0;
  }
  .deck-screen[data-screen="detail"] .screen-actions { display: none; }
  .deck-screen[data-screen="detail"] .screen-count { display: none; }

  /* A described choice is built like a deal card - photo, scrim, type over it,
     16px radius - so the intake opens in the same language as everything else.
     The label and its line stack; unstyled they ran together as one string.
     The card's ::after is also the radio dot the base sheet draws, so its size
     and border are reset here or the dot survives in the corner. */
  .choice.has-note {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    padding: 24px;
    border: 1px solid rgba(255, 247, 230, 0.14);
    border-radius: 16px;
    background: #0e0d0b;
    text-align: center;
  }
  .choice__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .choice.has-note::after,
  .choice.has-note.is-selected::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    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%);
    content: "";
  }
  .choice.has-note .choice__text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .choice__label {
    font-family: var(--serif, Georgia, serif);
    font-size: 40px;
    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: 14px;
    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);
  }
  .choice.has-note.is-selected {
    border-color: var(--copper, #c9a86a);
    box-shadow: 0 0 0 1px var(--copper, #c9a86a);
  }
}