/* === Desktop layout (2026-10-15, persona round 6) ===
   Walter played every round on a 1280x800 monitor and scored desktop fit 2 of 5: the game was a 460px
   phone column with black bands either side, a 140px typing box, and a five-line answer area that
   scrolled the first sentence away. From 1024px wide the interview becomes two columns: the portrait
   on the left at its own 4:5 shape, and the reply, the question cards and a full-width question box on
   the right, where nothing sits over a face. The other screens get a wider column.
   Everything here is inside the media query, so a phone renders exactly as before. */

@media (min-width: 1024px) {
  :root {
    /* The bust art is 4:5, so at full height it is 0.8 x the height wide; never more than 46% of the width. */
    --iv-port-w: min(46vw, 80dvh);
    --iv-gap: 56px;
    --iv-col-max: 660px; /* about 60 characters a line at the reply's size: a comfortable read */
    --iv-pair-left: max(0px, calc((100vw - var(--iv-port-w) - var(--iv-gap) - var(--iv-col-max) - 48px) / 2));
    --iv-pair-right: max(40px, calc(100vw - var(--iv-pair-left) - var(--iv-port-w) - var(--iv-gap) - var(--iv-col-max)));
  }

  /* --- Interview: portrait left, conversation right --- */
  .iv-screen {
    max-width: none;
    justify-content: flex-start;
    padding: 84px var(--iv-pair-right) 0 calc(var(--iv-pair-left) + var(--iv-port-w) + var(--iv-gap));
  }
  /* The portrait and everything that dresses it live in the left panel only. A soft fade at both
     edges lets the art sink into the room instead of ending on a hard line. */
  #portrait-layers, #portrait-bust, .iv-dust, .iv-vignette, .iv-scrim-bottom {
    left: var(--iv-pair-left); right: auto; width: var(--iv-port-w);
  }
  #portrait-layers, #portrait-bust {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 84%, transparent 100%);
  }
  /* No text sits over the face here, so the bottom scrim only has to settle the bust's lower edge. */
  .iv-scrim-bottom { top: 72%; background: linear-gradient(to bottom, transparent, rgba(13,11,7,0.9)); }
  .iv-lampswing { left: calc(var(--iv-pair-left) + var(--iv-port-w) / 2); width: calc(var(--iv-port-w) * 1.2); margin-left: calc(var(--iv-port-w) * -0.6); }

  .iv-hud { left: var(--iv-pair-left); right: var(--iv-pair-right); padding: 18px 0 0 18px; }

  /* The stage fills the column between the top bar and the questions: the name at the top, the reply
     under it with all the room that is left. Positions never move with the reply's length, so a careful
     reader always finds the first line in the same place. */
  .iv-stage, .iv-foot { width: 100%; max-width: var(--iv-col-max); }
  .iv-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 0 14px; }
  .iv-stage::before { display: none; } /* the band was for text over the portrait; this column is plain dark */
  .iv-name { font-size: 32px; }
  .iv-role { font-size: 13px; }
  .momentum-stamp { font-size: 15px; }
  .iv-asked { font-size: calc(13px * var(--read-scale, 1)); margin-bottom: 10px; }
  .iv-asked-text { -webkit-line-clamp: 2; }
  .iv-answer { flex: 0 1 auto; min-height: 2.4em; max-height: none; font-size: calc(21px * var(--read-scale, 1)); line-height: 1.55; text-shadow: none; }
  /* More keeps its room even when hidden, so the reply area is the same height whether or not a page
     is waiting, and the page break measured against it holds (interview-stream.js nextWouldOverflow). */
  .iv-more { flex: none; }
  .iv-more[hidden] { display: flex; visibility: hidden; }
  .iv-foot { padding: 0 0 22px; }

  /* The question box gets its own row across the column, two lines tall and growing to five, with the
     Case File, the evidence case and Ask on a row below it. */
  .iv-inputbar { flex-wrap: wrap; gap: 10px; }
  .iv-inputbar #input { order: -1; flex: 1 1 100%; height: 66px; min-height: 66px; max-height: 150px; padding: 12px 14px; font-size: calc(18px * var(--read-scale, 1)); line-height: 1.4; }
  .iv-send { order: 1; min-width: 132px; }
  /* The budget line sits between the evidence case and Ask instead of taking a row of its own. */
  .ask-budget { flex: 1 1 0; min-width: 0; order: 0; align-self: center; margin: 0 8px; }
  /* At most two cards, one line each where they fit, so the reply keeps the room (r12 Walter: three tall
     cards and the shown-item line left a confession four lines and cut its last words). */
  .ask-chip { min-height: 40px; padding-top: 7px; padding-bottom: 7px; }
  .ask-chips .ask-chip:nth-child(n+3) { display: none; }

  /* Notices sit over the portrait, never over the reply. */
  body[data-view="interview-view"] #toast-root {
    left: calc(var(--iv-pair-left) + var(--iv-port-w) / 2);
    width: min(420px, calc(var(--iv-port-w) - 64px));
    top: 76px;
  }
  /* Nestor's note too, over the lower portrait: in the column it took the reply down to two lines and
     a three-sentence answer needed two More taps (r11 Walter, 1280x800). */
  body[data-view="interview-view"] .nestor-bubble {
    position: fixed; z-index: 40; margin: 0;
    left: calc(var(--iv-pair-left) + 24px);
    width: min(440px, calc(var(--iv-port-w) - 48px));
    bottom: 32px;
  }

  /* A Case File picker shows all its options at once when the screen has the height (eight times fit at
     800px tall), instead of hiding the last one under Cancel. */
  .cf-picker-sheet { max-height: 86dvh; }

  /* Overlays opened from the interview (record, evidence, board) get a wider sheet. */
  .iv-sheet { max-width: 720px; border-radius: 14px 14px 0 0; }
  .rec-sheet #history { max-height: 66dvh; }
}

/* --- The other screens on a wide window (2026-10-15) ---------------------------------------------------
   The roster, the accusation and the ending were the same 460px column. They get a wider stage: the five
   suspects stand in one row, the accusation fits on one screen in two columns (no scrolling under the
   fixed home button, Walter 296), and the ending reads at a book's width. */
@media (min-width: 1024px) {
  #roster-view .pstage { width: min(100vw, 980px); }
  #roster-view .rs-head { padding: 40px 72px 0 40px; }
  #roster-view #cards { gap: 22px 16px; padding: 16px 40px 8px; }
  #roster-view .rs-pol { width: min(170px, calc((100% - 64px) / 5)); }
  #roster-view .rs-accuse { left: 40px; right: 40px; max-width: 560px; margin: 0 auto; }

  #accusation-view .pstage { width: min(100vw, 1000px); }
  #accusation-view .ax-col {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 56px; row-gap: 14px;
    grid-template-areas: "head head" "pick warrant" "more proof" "more foot";
    align-content: start; padding: 48px 48px 32px;
  }
  #accusation-view .ax-head { grid-area: head; }
  #accusation-view .ax-pick { grid-area: pick; }
  #accusation-view .ax-pick.ax-pick-more { grid-area: more; }
  #accusation-view .ax-warrant { grid-area: warrant; align-self: start; }
  #accusation-view .ax-proof-block { grid-area: proof; }
  #accusation-view .ax-footer { grid-area: foot; align-self: end; }
  #accusation-view .ax-lineup { justify-content: flex-start; gap: 14px; }
  #accusation-view .ax-pick { gap: 10px; }
  #accusation-view .ax-chip { width: 84px; min-width: 0; }

  #ending-view .pstage { width: min(100vw, 760px); }
  #ending-view .en-col { padding: 52px 56px 32px; }
}