/* ============================================================================
   XXVI — V17 · task 075 · item 6(b) · the Results film, full screen on a phone.

   A phone held upright shows the whole research screen at the phone's width
   (scale 0.26). "Expand" opens the same film over the whole screen, laid on
   its side, as it is on a computer: the film's frame gets a computer's
   proportions (800 px high, as wide as the screen's long side allows), and is
   scaled to fit. The iPhone has no Fullscreen API for a page, so this is a
   fixed layer, turned by CSS while the phone is upright and not turned when
   it is already on its side. The way back: the close mark, Esc, or Back.
   expand075.js sets the class and the sizes; results.js is not changed.
   ========================================================================== */

/* the button: in the masthead's band, between the XXVI mark and the EN/HE pair, only while the film is up */
.x075-open{
  position:fixed; top:23px; left:50%; z-index:120;
  height:23px; padding:0 10px;
  display:none; align-items:center; gap:7px;
  transform:translateX(-50%);
  background:rgba(8,9,11,.55);
  border:1px solid var(--champ-line); border-radius:2px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--champ); cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.x075-open.on{ display:flex; }
.x075-open.up{ opacity:.92; pointer-events:auto; }
.x075-open:focus-visible{ opacity:1; border-color:var(--champ); outline:0; }
@media (hover:hover) and (pointer:fine){ .x075-open:hover{ opacity:1; border-color:var(--champ); } }   /* task 004 (I6) */
.x075-open svg{ width:9px; height:9px; display:block; }

/* the layer: the film's own pin, fixed over everything (the masthead is at 110, the page's notes at 200) */
html.res-x075, html.res-x075 body{ overflow:hidden !important; overscroll-behavior:none; }
html.res-x075 #resultsPin{
  position:fixed !important; inset:auto !important; top:0 !important; left:0 !important;
  width:var(--x075-w) !important; height:var(--x075-h) !important;
  transform:var(--x075-turn) !important; transform-origin:0 0 !important;
  opacity:var(--x075-o, 1) !important; pointer-events:auto !important;   /* task 004 (I13): expand075.js fades it in and out */
  z-index:1000 !important; touch-action:none;
}
html.res-x075 #resultsBox{
  inset:auto !important; left:var(--x075-bx) !important; top:var(--x075-by) !important;
  width:var(--x075-bw) !important; height:var(--x075-bh) !important;
  transform:scale(var(--x075-k)) !important; transform-origin:0 0 !important;
  opacity:1 !important;
}
/* the page's other fixed layers stay under it */
html.res-x075 .x075-open{ display:none; }

/* the close mark: the film's top corner on the language's end side, where the
   site's EN/HE pair stands on a computer (the film keeps that corner free) */
.x075-close{
  position:absolute; top:6px; inset-inline-end:8px; z-index:5;
  width:24px; height:24px; padding:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(8,9,11,.6);
  border:1px solid var(--champ-line); border-radius:50%;
  color:var(--champ); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
html.res-x075 .x075-close{ display:flex; }
.x075-close:focus-visible{ border-color:var(--champ); outline:0; }
@media (hover:hover) and (pointer:fine){ .x075-close:hover{ border-color:var(--champ); } }   /* task 004 (I6) */
.x075-close svg{ width:9px; height:9px; display:block; }

/* task 077 · item 9 (David did not see it): the button is larger and lit - a full champagne hairline on the
   champagne wash, the word and the mark brighter and bigger, centred on the pair's line (19-42 px) - and the
   close mark is a clear round × of 36 px. The phone only, upright only, while the Results film is pinned, as before. */
.x075-open{ top:17px; height:28px; padding:0 12px; gap:8px; font-size:10.5px; letter-spacing:.16em; font-weight:500;
  background:var(--champ-wash, rgba(201,168,118,.13)); border-color:rgba(201,168,118,.75); color:#E2C795; }
.x075-open.up{ opacity:1; }
.x075-open svg{ width:11px; height:11px; }
.x075-close{ top:8px; inset-inline-end:10px; width:36px; height:36px; border-color:rgba(201,168,118,.75); background:rgba(8,9,11,.78); color:#E2C795; }
.x075-close svg{ width:13px; height:13px; }

/* task 079 · item 5 (David): on its first appearance in a visit the button breathes three times, 1.6 s each - the border
   goes to the full champagne and a soft champagne ring grows around it (0 -> 8 px, opacity .45 -> 0) - then it stands
   still (expand075.js sets .p079 and takes it off). Reduced motion: no breath, the champagne border for 3 s. */
.x075-open.p079{ animation:x079br 1.6s ease-out 3; }
@keyframes x079br{
  0%{ border-color:rgba(201,168,118,.75); box-shadow:0 0 0 0 rgba(201,168,118,.45); }
  35%{ border-color:var(--champ); }
  100%{ border-color:rgba(201,168,118,.75); box-shadow:0 0 0 8px rgba(201,168,118,0); }
}
@media (prefers-reduced-motion: reduce){ .x075-open.p079{ animation:none; border-color:var(--champ); } }
/* task 090 · #4 (089): then one gentle breath every 7 s while it shows (expand075.js): the same ring, softer and smaller */
.x075-open.p090{ animation:x090br 1.6s ease-out 1; }
@keyframes x090br{
  0%{ border-color:rgba(201,168,118,.75); box-shadow:0 0 0 0 rgba(201,168,118,.30); }
  35%{ border-color:rgba(226,199,149,.95); }
  100%{ border-color:rgba(201,168,118,.75); box-shadow:0 0 0 6px rgba(201,168,118,0); }
}
@media (prefers-reduced-motion: reduce){ .x075-open.p090{ animation:none; } }

/* task 004 (I9): both targets reach 44 px, the look is unchanged */
.x075-open::after{ content:""; position:absolute; left:0; right:0; top:50%; height:44px; translate:0 -50%; }
.x075-close::after{ content:""; position:absolute; inset:-4px; border-radius:50%; }