/* ============================================================
   sheets.css -- the strip that holds the mission list and the profile

   Only the chrome around them is here. The two pages keep their own
   stylesheets and are drawn inside their own document, so nothing in this
   file can reach them and nothing in theirs can reach the game: the game has
   a `.chip` that is a pause button and the profile has a `.chip` that is a
   label, and they are the same word in two documents rather than a collision.
   ============================================================ */
#sheet{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column;
  background:#12101f;
  /* a sheet is read, so the page underneath must not get the gesture: this
     element covers it, and the child document handles its own scrolling */
  touch-action:pan-y;
}
#sheetbar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:calc(7px + env(safe-area-inset-top,0px)) 10px 7px;
  background:linear-gradient(180deg,#241338,#1a0e2b);
  border-bottom:1px solid rgba(247,181,63,.28);
}
#sheetBack{ flex:0 0 auto; font-size:clamp(10.5px,1.6vw,12.5px); padding:8px 13px; }
#sheetTitle{
  flex:1 1 auto; min-width:0; text-align:right;
  font-family:var(--serif); letter-spacing:.14em; text-transform:uppercase;
  font-size:clamp(9.5px,1.4vw,11.5px); color:rgba(255,225,160,.62);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#sheetFrame{
  flex:1 1 auto; width:100%; min-height:0; display:block;
  border:0; background:#12101f; color-scheme:dark;
}
/* The strip is short and the frame takes the rest, so on a phone held either
   way the list gets the screen rather than the bar. Nothing here is hidden at
   any size and nothing asks anybody to turn their device. */
@media (max-width:430px){
  #sheetbar{ padding:calc(5px + env(safe-area-inset-top,0px)) 8px 5px; }
}